Failing to load twitter Bootstrap resource when using angular-cli

Question

I have used Angular CLI to build my first Angular2 application. I'm trying to make use of the twitter Bootstrap modules but it's failing to find it:

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.css 

I have an index.html with the following line in the

<link href="site.css" rel="stylesheet">

I also then have the single line in the ./public/site.css:

@import 'node_modules/bootstrap/dist/css/bootstrap.css';

The Bootstrap module exists here ./node_modules/bootstrap/dist/css/.. but it still can't find it. Any thoughts as to what I'm doing wrong?

Answer 1

In angular-cli-builds.js , you need to add the file so it's copied during build.

vendorNpmFiles: [
  ...
  'bootstrap/dist/css/bootstrap.css'
]

It will then be available in browser in vendor folder, so change site.css to

@import 'vendor/bootstrap/dist/css/bootstrap.css';

If it doesn't work, after build, check your dist/ folder manually, locate the file and update the paths...

More info here: 3rd party lib installation