Je suis en train de migrer le projet Angular 5 vers Angular 6.
En commençant l'application par
npm start
obtenir l'erreur ci-dessous
** Angular Live Development Server is listening on localhost: 9000,
open your browser on http://localhost:9000/ **
91% additional asset processing scripts-webpack-plugin× 「wdm」:
Error: ENOENT: no such file or directory,open'\trunk\node_modules\jquery\dist\jquery.min.js'
J'ai essayé
npm install jquery --save
npm install @types/jquery --save
Rien ne fonctionne
J'ai vérifié mon dossier de modules de nœud, je peux voir le fichier jQuery
Collé mon package.json et angular.json ci-dessous
package.json
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"bootstrap": "^4.1.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"@types/jquery": "^3.3.1",
"popper.js": "^1.14.3",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-angular": "~0.6.0",
"TypeScript": "~2.7.2",
"@angular/cli": "~6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
angular.json
"styles": [
"src/styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"./assets/css/font-icon.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
S'il vous plaît aidez-moi à résoudre ce problème.
Une fois encore, l’équipe angulaire rend les choses plus difficiles sans raison réelle = (
J'ai eu ce problème et après avoir cherché sur Googling sans résultat, je me suis demandé s'ils avaient changé de chemin relatif et renommé angular-cli.json.
Un peu plus haut dans le fichier, j'ai trouvé la ligne:
Oui, changez simplement:
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
à
"./node_modules/jquery/dist/jquery.js",
"./node_modules/tether/dist/js/tether.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
Pour Angular 6, le chemin est le suivant:
de :
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
à
"./node_modules/jquery/dist/jquery.js",
"./node_modules/tether/dist/js/tether.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
Dans Angular 6, vous n'avez pas besoin d'écrire:
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
Vous pouvez écrire avec ./
comme en haut, cela fonctionnera aussi, mais le moyen le plus simple consiste à créer le fichier angular.json
:
"node_modules/jquery/dist/jquery.js",
"node_modules/tether/dist/js/tether.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
A mon avis c'est mieux et plus clair
Installez @ngBootstrap
avec ce npm install --save @ng-bootstrap/ng-bootstrap
et npm install jquery --save
ou npm install @types/jquery --save
après l’installation, allez à angular.json
et localisez l’emplacement
"styles": [
{
"input": "styles.css"
}
],
"scripts": []
et changez cela en ceci:
"styles": [
"styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
et ng server --open
pour exécuter votre projet
Dans votre fichier 'tsconfig.json', vous faites peut-être
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
},
"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],
}
Vous pouvez remplacer
"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],
à
"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],
De plus, dans votre fichier 'angular.json', je supprime '../' devant node_modules dans "styles" et "scripts".
Et j'ai copié les lignes des "scripts" dans les "scripts" de la catégorie "test"
"test": {
...
"styles": [
"src/styles.css"
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"./assets/css/font-icon.css",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
Chemin relatif ../
utilisé pour remonter d’un répertoire. Donc, vérifiez d’abord le chemin du fichier, s’il ne contient pas le dossier racine de votre projet, vous recherchez ce fichier jquery ailleurs qui n’existe même pas.
Si le fichier node_modules et le fichier angular.json se trouvent tous les deux dans le même répertoire, vous ne devez pas utiliser de chemin relatif.
Dans Angular 6, vous n’avez pas besoin d’utiliser un chemin relatif pour aller à l’intérieur de node_modules à partir de angular.json (../
ou même comme ./
).
J'ai eu un problème similaire...
Le plugin Jquery
n'avait pas de npm package
prêt: (
J'ai donc décidé de le placer dans le dossier des actifs ...
Evidemment cela n'a pas fonctionné.
alors j'ai fait des tests ...
Voici ce qui a fonctionné pour moi:
Accédez à node_modules/jquery/dist/
- et insérez simplement le fichier plugin ici.
Une fois que cela est fait, changez votre fichier angular.json
de:
"scripts": [ "node_modules/jquery/dist/jquery.min.js", "../assets/libraries/okshadow.min.js"]
À:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery/dist/okshadow.min.js"
]
Et tout est prêt!
P.S. C'est sur Angular 7.0
plutôt que Angular 6