8

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?

3
  • Can you check if css exists at that location on file system. Are you using angular cli to build ? If yes then you need copy this to vendor and adjust the path Jul 4, 2016 at 17:07
  • Yes, the file is there. By adding to the vendor do you mean to vendorNpmFiles? i added this line there 'bootstrap/**/*' and it still doesn't work. Jul 4, 2016 at 17:21
  • Yes, Now check if file is there in dist/vendor. If it is then change link to link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css"> Jul 4, 2016 at 17:25

5 Answers 5

21

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"
]
1
  • 1
    This answer is still valid one year later. Well done!
    – EdoB
    Oct 27, 2016 at 21:50
7

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

0
4

If you use angular-cli after the webpack transition, add

"../node_modules/bootstrap/dist/css/bootstrap.css"

to the styles array in angular-cli.json like:

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

If you also use bootstrap javascript, add those files to the scripts array.

3
  • It is recommended to have Bootstrap CSS to the apps[0].styles; e.i. "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.css" ], refer npmjs.com/package/angular-cli Oct 23, 2016 at 1:24
  • @MartinW What is the difference between adding it in the angular-cli.json or just importing it in a sass/scss file (if that is used)?
    – Todilo
    Apr 21, 2017 at 22:02
  • Wonder, why no one upvote this? this is the easiest way. but i did have to redo "ng serve" for the changes to be picked up.
    – Plankton
    Jun 22, 2017 at 5:01
1

You can use

@import "~bootstrap/dist/css/bootstrap.css";

or

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

You are using angular cli for build hence you need to copy bootstrap to vendor directory by updating vendorNpmFiles in angularcli-build.js

bootstrap/**/*.*

Now you need to update link of index.html to pick css from vendor

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.