Angular 2 doesn't import Bootstrap css

Question

Directly from https://angular.io/docs/ts/latest/guide/forms.html

Let's add the stylesheet.

Open a terminal window in the application root folder and enter the command:

npm install bootstrap --save

Open index.html and add the following link to the head.

link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

However, i keep getting 404

GET http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css

It works when i add the script with the online address, but why does angular fails to find the path to my file?

Answer 1

If you're using angular-cli, you can go to root/styles.css and add this line

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Or go to .angular-cli.json and modify styles

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

Answer 2

It is working when index.html is in the same directory as node_modules.

To add bootstrap from angular-CLI put

'bootstrap/dist/**/*.+(js|css.map|css|eot|svg|ttf|woff|woff2)'

in angular-cli-build.js and run ng build