Setup New Angular 9 Project from Scratch using Latest Angular CLI

Last updated on by Digamber
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.

This tutorial has been updated to Angular 9 with the latest npm dependencies and Angular CLI 9

Prerequisite

  • Node Latest Version
  • Angular Latest
  • Angular CLI Latest
  • SCSS
  • Bootstrap 4
  • Font Awesome 5
  • NG Bootstrap
  • Typescript

Setup Node.js & NPM Environment

You must have set up latest Node JS set up in your system.

If you do not know how to install and confiuge Node & NPM on your machine. Then, do check out the following tutorial:

Downloading and installing Node.js and npm on MacOS, Windows & Linux.

Install Latest Angular CLI Version

Run the following command to install the latest version of Angular CLI (version 9+), Ignore this step if Angular CLI is already installed.

npm install -g @angular/cli@latest

Setting up a New Angular 9 Project

A brand new Angular project comes with .css files. There are some better ways to manage a stylesheet in the angular project. You can set up SCSS, SASS or LESS in our basic Angular project.

Enter command and hit enter to set up a latest Angular 9 project:

ng new my-angular-app

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com 

In the terminal you will be asked to install Angular Routing file, this file contains the code for handling the navigation in Angular.

Angular CLI also asks you to choose stylesheet format from Sass, Less, Stylus, SCSS and CSS.

cd my-angular-app

Add Bootstrap 4 in Angular 9 App

Bootstrap is a UI framework for developing Sleek, intuitive, and powerful front-end application.

So we are all set to integrate Bootstrap 4 in Angular 9 application using latest Angular CLI.

Run the following command in the terminal:

npm install bootstrap

Once, the Bootstrap is downloaded in your project, then register bootstrap.scss files in the angular.json file.

"styles": [
     "node_modules/bootstrap/scss/bootstrap.scss",
     "src/scss/styles.scss"
]

Add Font Awesome 5 Icons Library in Angular

Let’s start integrating Font Awesome 5 icons library in our Angular project.

Type the following command in the terminal and hit enter.

npm install @fortawesome/fontawesome-free-webfonts

Then go to angular.json file and add the following lines of code in styles array to include the Font Awesome in Angular app.

"styles": [
      "node_modules/bootstrap/scss/bootstrap.scss",
      "src/styles.scss",
      "node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
      "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
      "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
      "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"              
]

Afterwards, You can easily use any Font Awesome5 icons in your project.

Just visit Font Awesome5 website and search for any free icon you’d like to use in your project.

Search FontAwesome5 Icons

Copy the icon code from FontAwesome5 website.

Copy FontAwesome Code

Go to your any app.component.html file and paste the given below code.

<i class="fab fa-angular"></i>

Alwyas restart the server, when you make any changes in theangular.json file. Otherwise, changes won’t reflect in your Angular project.

ng serve --open

Add NGBootstrap Widget Library in Angular

NG Bootstrap is a Bootstrap widgets library, it doesn’t require any 3rd party dependency to run the native Bootstrap widgets that run on jQuery.

To setup, NG Bootstrap run the following command in Angular CLI:

npm install --save @ng-bootstrap/ng-bootstrap

Once the NgBootstrap is installed in your project then go to app.module.ts file. Import the NgbModule module and declare inside the imports array:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Now you can use any of the given below NG Bootstrap widget in your Angular project.

  • Tab
  • Modal
  • Alert
  • Tooltip
  • Carousel
  • Collapse
  • Accordion
  • Pagination
  • Date-picker

Import only required NG Bootstrap widget in your Angular template, this will help in maintaining the overall app size.

import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbPaginationModule, NgbAlertModule, ...],
  ...
})
export class YourAppModule {
}

Conclusion

I’ve created this tutorial to speed up our development process. Focusing on Not wasting time on thinking about which framework to use for basic Angular project setup. Managing the CSS files in a better way.

Added external packages such as Font Awesome, Bootstrap, NG Bootstrap in your Angular project. You can download the complete code of this project on this GitHub repository.