web-dev-qa-db-fra.com

Bootstrap vs Angular 2: ERREUR dans multi script-loader! Module introuvable: erreur: /~/bootstrap/dist/js/bootstrap.js

J'ai créé un nouveau projet Angular 2 avec ng new klw

  1. J'ai installé bootstrap: npm install bootstrap@next

  2. ajout de style et de scripts en angulaire

    "styles": [
    "styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

  3. Bootstrap intégré 4 à angular-cli: npm install --save @ng-bootstrap/ngbootstrap

  4. ajout de l’importation NgbModule dans app.module.ts
  5. ajouté à la section d'importation NgbModule dans app.module.ts
  6. modifié app.module.html ajouté: <NgbAlert> Alert text </NgbAlert>

Quel était ce que j'ai manqué de faire?

Quand je suis en train de servir, j'ai les erreurs suivantes:

ERROR in Error encountered resolving symbol values statically. Could not resolve @ng-bootstrap/ng-bootstrap relative to F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts., resolving symbol AppModule in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts, resolving symbol AppModule in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\jquery\dist\jquery.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\tether\dist\js\tether.js' in 'F:\src\prjs\angular2\pilot\klw'

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\tether\dist\js\tether.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\bootstrap\dist\js\bootstrap.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\bootstrap\dist\css\bootstrap.css' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css

ERROR in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts (8,25): Cannot find module '@ng-bootstrap/ng-bootstrap'.)

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap' in 'F:\src\prjs\angular2\pilot\klw\src\app'
 @ ./src/app/app.module.ts 15:0-55
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.
angularbootstrap-modal
6
Laszlo
  1. enlève le symbole ^ pour @ angular/cdk et @ angular/material dans package.json
  2. supprimer node_modules et package-lock.json
  3. npm cache clean -f
  4. npm i

Cela fonctionne dans mon cas. J'espère que ça vous aide

2
Dmitry Grinko

J'ai eu le même problème mais corrigé. Veuillez vérifier à l'intérieur de .angular-cli.json que tous les fichiers de scripts liés sont disponibles ou non. si un fichier de script n'est pas disponible, l'erreur @ multi script-loader se produira. Liez correctement tout le chemin du script. Veuillez vérifier ici: https://github.com/angular/angular-cli/issues/5665#issuecomment-452282834

0
nandhakumar

J'ai eu le même problème. Mais je l’ai résolu. L’erreur principale est dans les scripts et les css qui proviennent du dossier 'node_modules'. 'fichiers et tapez manuellement le chemin de tous vos SCRIPTS et CSS ..

Merci

0
Subhajit Das

La bonne façon:

npm install --save bootstrap@next
0
Emir Hazır