angular-cli and bootstrap 4

Question

I move my first steps with angular 2, in particular I use angular-cli official tool to create new project.

I created a new project in this way

ng new [my-project-name]

The project was created correctly.

After that I would like to install bootstrap 4, and I follow the official guide in angular-cli page.

I install bootstrap with npm:

npm install bootstrap@next

and I add the line in my angular-cli.json:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],

in app object.

When I build the app and run it in server with: ng serve

I don't find in index.html the reference for bootstrap css and javascript.

I don't understand if import of this file is automatically added in my index.html or I need to add it manually.

Answer 1

When you add the scripts and styles entries to the angular.cli.json file, they are added to the global scope. Specifically, they are added to scripts.bundle.js and styles.bundle.js. There's no need to add them to index.html. You should be good to go after stopping and restarting ng serve. For good measure I run an npm rebuild after making changes to the angular.cli.json.

Answer 2

You don't need to add anything manually in the HTML file. It's done automatically for you.

Here's why:

Your CSS styles will be added to the styles.bundle.css file. So you will see the following link to stylesheet in your HTML source when you run the app: <link href="styles.bundle.css" rel="stylesheet">. If you click the styles.bundle.css in the browser, it will show you all the styles it has compiled together.

One more important thing. I also suggest you swap the order of the stylesheets in your angular-cli.json file to the following:

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

The reason for the above change is that your files are compiled and served in the order that you provide in angular-cli.json file. So let's say if you have written some custom styles for btn-primary in styles.css, that will be over-written by bootstrap.css always and you will never see your styles being applied in the UI and you won't be able to figure out what is going wrong.

If you swap the order of your files as I suggest, bootstrap styles will be loaded first, followed by your custom styles thereby, over-riding bootstrap's styles with your own styles. This would be the only fix you need to do in your case right now and everything else should work smoothly without any effort on your part.