web-dev-qa-db-fra.com

JQuery ne fonctionne pas dans angular 6 Erreur: ENOENT: aucun fichier ou répertoire de ce type, ouvrez '...\node_modules\jquery\dist\jquery.min.js'

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.

jqueryangularangular6
20
MPPNBD

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"
60
Belmiris

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"
3
Diego

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

1
Freestyle09

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 

1
Wealsegun

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"
     ],
     ...
0
Kyky

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 ./).

0
Blasanka

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

0
Techtiger255 Code Mode