Working with Angular

Hello Net-heads!! I have been working on some internal Angular projects in recent times, and recollecting some useful commands to quickly start a project was a difficult task. I have initially stored all the commands in a .txt file but failed to find the file from a pile of similar files.

So, here on this page, I’ll be jotting down all the commands (all most all) needed to spin up and serve an Angular Project. Feel free to comment, if I’ve missed any useful commands.

Before we dive in, in case if you are interested to take a look at my Angular related stories, you can find them here:-

Working with Ionic — The Right Way

Let us then begin:
Assuming that your system is all set with the required software

To generate a routing module to the initial project

ng new targaryen --routing

The project structure looks something like this

Creating feature module with routing

ng generate module houseTargaryen --route house --module app.module

This creates a houseTargaryenfolder having the new lazy-loadable feature module HouseTargaryenModule defined in the house-targaryen.module.ts file and the routing module HouseTargaryenRoutingModule defined in the house-targaryen-routing.module.ts file. The command automatically declares the HouseTargaryenComponent and imports HouseTargaryenRoutingModule inside the new feature module.

app-routing.module.ts routes array will be updated with the declared house route.

To generate service

ng generate service services/targaryenTree

Import the service in the specific module

To re-use component from one module to another

Declare the component class in the exports field of the module it belongs to.

Import AegonTargaryenModule inside the HouseTargaryenModule to re-use AegonTargaryenComponent

To build an HTTP interceptor

HTTP interceptors by the name intercept the HTTP requests and responses to attach extra information. For example:
* Error Handler
* JWT token interceptor

ng generate interceptor JwtInterceptor

Here is a sample interceptor to attach the JWT token for every request sent from the application

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { AuthService } from 'src/app/services/auth/auth.service';
import { environment } from './../../environments/environment';
/**
*
* This interceptor will be invoked only for HttpClient
*/
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// add auth header with jwt if user is logged in and request is to the api url
const jwtToken = this.authenticationService.token;
const isApiUrl = request.url.startsWith(environment.apiUrl);
if (jwtToken && isApiUrl) {
     request = request.clone({
     setHeaders: {
        Authorization: `${jwtToken}`
     }
    });
 }
  return next.handle(request);
}
}

To create Auth-Guard

ng generate guard guard/auth

The AuthGuard implementation looks like this:

You can also have a look at steps involved in migrating Angular projects to Version 11

Angular Migration to 11+