Angular-cli and bootstrap 4

Question

I am moving my first steps with angular 2, in particular I am using the official angular-cli tool to create a new project.

I created a new project 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 manual on the angular-cli page.

I install bootstrap with npm:

 npm install bootstrap@next 

and I will add a line to 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 the application object.

When I create an application and run it on the server with: ng serve

I did not find a link for bootstrap css and javascript in index.html.

I do not understand whether this file will be imported automatically added to my index.html or if I need to add it manually.

Answer 1

When you add script and style entries to the angular.cli.json file, they are added to the global scope. In particular, they are added to scripts.bundle.js and styles.bundle.js. There is no need to add them to index.html. You should be ready to go after stopping and rebooting. For good measure, I run npm rebuild after making changes to angular.cli.json.

Answer 2

You do not need to add anything manually to the HTML file. This is done automatically for you.

Here's why:

Your CSS styles will be added to the styles.bundle.css file. Thus, you will see the following link to the stylesheet in your HTML source when the application starts: <link href="styles.bundle.css" rel="stylesheet"> . If you press styles.bundle.css in a browser, it will show you all the styles compiled together.

Another important thing. I also suggest that you change the order of the style sheets in the angular-cli.json file to the following:

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

The reason for the above change is because your files are compiled and maintained in the order in which you provide the angular-cli.json file. So let's say if you wrote some custom styles for btn-primary in styles.css that will always be overwritten by bootstrap.css and you will never see that your styles are applied in the user interface and you won’t be able to figure out what not going so.

If you change the order of your files, as I suggest, bootstrap styles are loaded first, and then your custom styles, thereby dragging and dropping bootstrap styles with your own styles. This will be the only fix you need to make in your case right now, and everything else should work smoothly without any effort on your part.

Answer 3

I do not deviate if the import of this file is automatically added to my index.html or I need to add it manually.

You need to add it yourself.