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.

You can use a project that provides proper integration of Angular 2 and Bootstrap 4: ng-bootstrap.github.io — pkozlowski.opensource
– pkozlowski.opensource, Commented Sep 12, 2016 at 8:11

Larry Popiel · Accepted Answer · 2016-10-17 22:07:19Z

6

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.

answered Oct 17, 2016 at 22:07

Larry Popiel

1411 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Devner · Accepted Answer · 2017-01-17 16:12:20Z

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.

Thanks so much for this. I was having a hard time understanding why I had to use !important so much and then I saw this and was like duh! It's kind of a no brainer, but deceptively easy to not notice.

jmachnik · Accepted Answer · 2016-09-12 07:26:06Z

0

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

You need to add it by yourself.

answered Sep 12, 2016 at 7:26

jmachnik

1,1209 silver badges19 bronze badges

Collectives™ on Stack Overflow

angular-cli and bootstrap 4

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related