Angular 7 installing bootstrap

Question

I'm following the "Pro Angular 6" book which should work with Angular 7. I start the project like so;

Install angular cli

sudo npm install -g @angular/cli

NOTE: This installed version 7.3.0 of the cli tool

Now install the TODO app

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

This works, then I add in bootstrap

npm install bootstrap@4.1.1

And I add the following to styles

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

Now when I serve the project I get the following error;

$ 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.

I've tried to replicate the issue, but everything seems to be working. Did it compile when removing the bootstrap css? I tried using: Angular CLI: 7.3.0 Node: 8.11.3 OS: win32 x64 bootstrap: ^4.1.1 Added syles: node_modules/bootstrap/dist/css/bootstrap.min.css — abestrad, Feb 04 '19 at 01:22
I just removed node_modules and did a 'npm install', then it all came to life. Not sure why that would changing things I thought the ng new would of done a npm install — map7, Feb 04 '19 at 02:03
Make sure you have @angular-devkit/build-angular as a dev dependency. — Ram Chandra Neupane, Feb 04 '19 at 03:19
@RamChandraNeupane you are correct @angular-devkit/build-angular is missing — Dexter, Feb 04 '19 at 04:09
@Dexter Great i'm posting answer here for if someone ran into same issue — Ram Chandra Neupane, Feb 04 '19 at 04:12

score 2 · Answer 1 · answered Feb 04 '19 at 04:24

2

I believe yo need to install @angular-devkit/build-angular as a dev dependencies in order to solve this issue

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

answered Feb 04 '19 at 04:24

Ram Chandra Neupane

1,826
3
19
36

score 0 · Answer 2 · answered May 27 '19 at 06:57

0

You have to add --save during the installation so that angular will add this dependency inside the package.json. try below code.

npm install bootstrap@4.1.1 --save

answered May 27 '19 at 06:57

Dinesh Hiregange

103
1
10

Angular 7 installing bootstrap

2 Answers2

Linked