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 [email protected]

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
– abestrad, Commented Feb 4, 2019 at 1: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
– map7, Commented Feb 4, 2019 at 2:03
Make sure you have @angular-devkit/build-angular as a dev dependency. — Ram Chandra Neupane
– Ram Chandra Neupane, Commented Feb 4, 2019 at 3:19
@RamChandraNeupane you are correct @angular-devkit/build-angular is missing — Dexter
– Dexter, Commented Feb 4, 2019 at 4:09
@Dexter Great i'm posting answer here for if someone ran into same issue — Ram Chandra Neupane
– Ram Chandra Neupane, Commented Feb 4, 2019 at 4:12

Ram Chandra Neupane · Accepted Answer · 2019-02-04 04:24:34Z

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 4, 2019 at 4:24

Ram Chandra Neupane

1,8913 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dinesh Hiregange · Accepted Answer · 2019-05-27 06:57:29Z

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 [email protected] --save

answered May 27, 2019 at 6:57

Dinesh Hiregange

1131 gold badge1 silver badge10 bronze badges

Comments

Harsh Patel · Accepted Answer · 2023-09-13 15:26:55Z

Add Bootstrap to package.json

npm install bootstrap --save
npm install jquery --save
npm install popper.js

Add the following lines to the “dependencies” section of the apps’ package.json file

    "dependencies": {
  ..
  "jquery": "^3.3.1",
  "bootstrap": "^4.1.3",
  "popper.js": "^1.14.3"
}

Add Bootstrap to angular.json

"apps": [{
  ...,
  "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"
  ],
}]

Finally, add Bootstrap to the app module

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import bootstrap from "bootstrap";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Collectives™ on Stack Overflow

Angular 7 installing bootstrap

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related