How to configure JWT interceptor in Angular

 

Define and export the jwtInterceptor function as below: (save in jwtInterceptor.ts)

import { HttpRequest, HttpHandlerFn } from '@angular/common/http';

import { inject } from '@angular/core';

import { AuthService } from '../services/auth.service'; // Replace with the actual path to your AuthService

export function jwtInterceptor(req: HttpRequest<any>, next: HttpHandlerFn) {

// Inject the AuthService to get the authentication token

const authToken = inject(AuthService).getToken();

// Clone the request and set the Authorization header

const newReq = req.clone({

headers: req.headers.set('Authorization', `Bearer ${authToken}`),

});

// Pass the cloned request to the next handler

return next(newReq);

}

Configurein AppConfig.js like below:

import { jwtInterceptor } from './interceptor/jwtInterceptor';// Import the function

export const appConfig: ApplicationConfig = {

providers: [

provideZoneChangeDetection({ eventCoalescing: true }),

provideRouter(routes),

provideClientHydration(withEventReplay()),

provideHttpClient(withFetch(),withInterceptors([jwtInterceptor]),),

]

};

Note: Way to do int Angular 15+

That's it, you are set, Happy Conding !!

Cheers,

Kapil

The `*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported

Recently encountered error below while building an app in Angular

 The `*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported

Pretty simple fix is that imoer common module in your component something like below

import { CommonModule } from '@angular/common';

@Component({

selector: 'app-abc',

templateUrl: './abc-component.html',

styleUrl: './abc.component.scss',

standalone: true,

imports: [CommonModule]

}

Error should disappear.

Enjoy coding !!!

Cheers,

Kapil

Warning: bundle initial exceeded maximum budget - Angular

 

If we get following warning :

Warning: bundle initial exceeded maximum budget.

then to solev this we need to increase budget in angular.json 

            "budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},

Cheers,

Solved : VSCode: Debugging Error “Breakpoint set but not yet bound" - Angular, Node

 Hi, 

I was facing issue while setting up debugger with chrome with Angular app. My Chrome Launch configuration was : 

    "configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome",

"url": "http://localhost:4200",

"webRoot": "${workspaceFolder}"

}

After investigation found that it was not able to figure out webRoot correctly since my app was one more level down into app folder hence i have changed webRoot Path as below which did trick for me :) 

    "configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome",

"url": "http://localhost:4200",

"webRoot": "${workspaceFolder}/myAppStore/"

}

Relaunched the debug and it worked.

Cheers,

Kapil