loading...

Setup New Angular 9 Project from Scratch using Latest Angular CLI

singhdigamber profile image Digamber Rawat ・1 min read

The post Setup New Angular 9 Project from Scratch using Latest Angular CLI appeared first on positronX.io.

In this tutorial, we are going to learn how to easily set up a brand new Angular 9 project with SASS, Bootstrap 4, Font Awesome 5, and NgBootstrap from scratch.

click here to read more

Discussion

pic
Editor guide
Collapse
angularnodejs profile image
AngularNodeJS 🚀

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.