Setup New Angular 16 Project with Latest Angular CLI

Prerequisite

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

Copy the icon code from FontAwesome5 website.

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

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

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.