Setup New Angular 16 Project with Latest Angular CLI

Last Updated on by in Angular
In this tutorial, we are going to learn how to easily set up a brand new Angular 16 project with SASS, Bootstrap 5, Font Awesome 5, and NgBootstrap from scratch.Bootstrap is a popular open-source framework for building responsive and mobile-first websites and web applications. It provides a collection of CSS and JavaScript components that help developers create consistent and visually appealing user interfaces.

Key features of Bootstrap includes: Responsive Grid System, Pre-styled Components, CSS Stylesheets, JavaScript Plugins and Easy Customization.

Font Awesome is a notable icon library that offers a greater collection of scalable vector icons that can be easily customized and used in web projects. It offers a wide range of icons that cover various categories such as web, accessibility, transportation, technology, and more.

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


  • Node Latest Version
  • Angular Latest
  • Angular CLI Latest
  • SCSS
  • Bootstrap
  • 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 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 project:

ng new my-angular-app

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

cd my-angular-app

Add Bootstrap 5 in Angular

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

So we are all set to integrate Bootstrap 5 in Angular 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": [

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": [

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';

  declarations: [
  imports: [
  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';

  imports: [NgbPaginationModule, NgbAlertModule, ...],
export class YourAppModule {


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.

Digamber - Author

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.