1
votes

Angular 7 installation de bootstrap

Je suis le livre "Pro Angular 6" qui devrait fonctionner avec Angular 7. Je démarre le projet comme ceci;

Installez angular cli

$ ng serve --port 3001 --open
** Angular Live Development Server is listening on localhost:3001, open your browser on http://localhost:3001/ **

Date: 2019-02-04T00:42:38.279Z
Hash: 3b3bf9a4d6733eee0b6c
Time: 5466ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 5.07 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 1.88 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 2.09 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.03 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 327 kB [initial] [rendered]

ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/array' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/date' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/function' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/map' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/math' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/number' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/object' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/parse-float' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/parse-int' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/reflect' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/regexp' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/set' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/string' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/symbol' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es2015-polyfills.js
Module not found: Error: Can't resolve 'core-js/es6/weak-map' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es7/reflect' in '/home/map7/code/pro_angular_6/chap2_prep/todo/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in node_modules/@angular/common/src/location/location.d.ts(8,34): error TS2307: Cannot find module 'rxjs'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(9,28): error TS2307: Cannot find module 'rxjs'.
node_modules/@angular/core/src/application_ref.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
node_modules/@angular/core/src/event_emitter.d.ts(8,39): error TS2307: Cannot find module 'rxjs'.
node_modules/@angular/core/src/linker/query_list.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
node_modules/@angular/core/src/util/lang.d.ts(8,28): error TS2307: Cannot find module 'rxjs'.
src/app/app.component.ts(3,1): error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.

â„¹ ï½¢wdmï½£: Failed to compile.

REMARQUE : Cette version 7.3.0 installée de l'outil cli

Maintenant, installez l'application TODO

        "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],

Cela fonctionne, puis j'ajoute dans bootstrap

npm install bootstrap@4.1.1

Et j'ajoute ce qui suit aux styles

ng new todo
cd todo
ng serve --port 3001 --open

Maintenant, lorsque je sers le projet, j'obtiens l'erreur suivante;

XXX

angular angular-cli bootstrap-4

5 commentaires

J'ai essayé de reproduire le problème, mais tout semble fonctionner. At-il compilé lors de la suppression du css bootstrap? J'ai essayé d'utiliser: Angular CLI: 7.3.0 Node: 8.11.3 OS: win32 x64 bootstrap: ^ 4.1.1 Ajout de syles: node_modules / bootstrap / dist / css / bootstrap.min.css

Je viens de supprimer node_modules et j'ai fait une 'installation npm', puis tout a pris vie. Je ne sais pas pourquoi cela changerait les choses, je pensais que le ng new aurait fait une installation npm

Assurez-vous que @ angular-devkit / build-angular est une dépendance de développement.

@RamChandraNeupane vous avez raison @ angular-devkit / build-angular est manquant

@Dexter Super, je poste une réponse ici si quelqu'un a rencontré le même problème

3 Réponses :

2
votes

Je pense que vous devez installer @ angular-devkit / build-angular en tant que dépendances de développement afin de résoudre ce problème

npm install --save-dev @angular-devkit/build-angular

0 commentaires

0
votes

Vous devez ajouter --save lors de l'installation pour qu'angular ajoute cette dépendance dans le package.json. essayez le code ci-dessous.

npm install bootstrap@4.1.1 --save

0 commentaires

2
votes

Installez @ angular-devkit / build-angular en tant que dépendance dev. Ce package est nouvellement introduit dans Angular 7.0

npm install
npm update
ng update

Les commandes suivantes fonctionnent:

npm install --save-dev @angular-devkit/build-angular

0 commentaires