DEV Community

Discussion on: Setup New Angular 9 Project from Scratch using Latest Angular CLI

View post
Collapse
 
angularnodejs profile image
AngularNodeJS 🚀 • • Edited

For Bootstrap I include the minified output, there is less to send over the network:

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

If you include the scss file for Bootstrap 4, it is going to waste time since it needs to be compiled to css.

Also you missed some dependencies for Bootstrap 4, like jquery and popper.js and including the javascript dependencies under "scripts" like this,

"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

For fontawesome you should do the same, just include the minified file called all.min.css found under the "css" folder.

"styles": [
  "node_modules/@fortawesome/fontawesome-free-webfonts/css/all.min.css",
],

Also not sure why you're adding Bootstrap 4 and NgBootstrap, there is no reason to use both. NgBootstrap is pretty useless. You're coding in Angular, you should be able to code your own interactive components.