Can´t add Bootstrap 4 in Angular 6

Question

I have the problem when I try to add the latest bootstrap version with

npm install bootstrap

After that, I got an error message when I tried to run it.

ng serve --open

I Add Bootstrap in angular.json

like this

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

And the error message is

    ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve '...\node_modules\bootstrap\dist\css\bootstrap.min.css' in '...'

Why did I get the error message?

Answer 1

Delete "../node_modules/bootstrap/dist/css/bootstrap.min.css", in the Angular.json.

Try add this @import "~bootstrap/dist/css/bootstrap.css"; to your style.css file.

Ref: Styling Angular CLI v6 apps with Bootstrap

Answer 2

In the Angular 6 you can add bootstrap to two files:

1. Inside the angular.json :

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

2. Inside the angular.json :

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

3. Inside the styles.css :

    /* You can add global styles to this file, and also import other style files */ @import "~bootstrap/dist/css/bootstrap.css";

Note : If you use the first or second way, it's needed to cancel the running application, that means, if ng serve is active you must exit the app with Ctrl + C , but in the third way, it's not needed to cancel the application.

Answer 3

If the project has a test runner like Karma the Angular.json file has two styles property:

1- projects -> projectName -> architect -> build -> options

2- projects -> projectName -> architect -> test -> options

Maybe you just change styles in the test section and the build section has old styles.

Answer 4

In the new version of angular, use node_modules/bootstrap/dist/css/bootstrap.min.css instead of ../node_modules/bootstrap/dist/css/bootstrap.min.css

So in angular.json file style attribute will look like

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

NOTE: if ng serve is already running then you may need to stop and run it again after doing the above changes. Happy coding :)

Answer 5

In angular, We have to add the direction of the bootstrap we installed.
Which means steps are as follows to use bootstrap in angular.

1. npm install bootstrap

Then we have to add the path in angular.json as follows

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