HttpInterceptors and Dependency Injection Angular 18

Question

I'm setting up a JWT interceptor in Angular 18.. I had this set up in Angular 8, although that was a completely different setup using a class which inherits HttpInterceptor. here I am using function injection...

In app.module.ts I have the providers set as such:

  providers: [
    provideHttpClient(
      withInterceptors([jwtInterceptor])
    )
  ],

The jwt.interceptor.ts is as such:

import { Inject, Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpHandlerFn } from '@angular/common/http';
import { Observable } from 'rxjs';

import { AuthenticationService } from '../_services';

export function jwtInterceptor(request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
  // add auth header with jwt if user is logged in and request is to the api url
  const _authenticationService: AuthenticationService = Inject(AuthenticationService) as AuthenticationService;
  const _baseUrl: string = Inject('BASE_URL') as string;

  const currentUser = JSON.parse(JSON.stringify(_authenticationService.UserValue));
  const isLoggedIn = _authenticationService.IsLoggedIn;
  const isApiUrl = request.url.indexOf(_baseUrl) == 0;
  if (isLoggedIn && isApiUrl) {
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${currentUser.authData}`
      }
    });
  }

  return next(request);
}

now for the things I'm trying to inject:

AuthenticationService (important to note here that injecting base url in the constructor works, also I can inject the AuthenticationService itself into other constructors, just not in this httpInterceptors function):

import { Inject, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';


import { LoginInformation, User } from '../_dataObjects';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  private _userSubject: BehaviorSubject<User>;
  public User: Observable<User>;

  constructor(private _router: Router, private http: HttpClient, @Inject('BASE_URL') private _baseUrl: string) {
    var username = localStorage.getItem('user') ?? '';

    this._userSubject = new BehaviorSubject<User>(username.length > 0 ? JSON.parse(username) : new User());
    this.User = this._userSubject.asObservable();    
  }

  ...
}

Base url is defined in main.ts providers as such:

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

So what exactly is the question? You have mentioned what you did, but what are you looking for? — amritashan
– amritashan, Commented Jul 10, 2024 at 21:02
@funkycoder the question was in the function jwtInterceptor I needed to be able to inject the AuthenticationService and base_url as I would in the constructor of a legacy HttpInterceptor... Failing to find a way to do this I found a way to use an HttpInterceptor class instead utilizing provideHttpClient(withInterceptorsFromDi() ) as illustrated in my answer below. If you know a way to perform what I was trying to do injecting in the function, I am still ears to it — Jessie Lulham
– Jessie Lulham, Commented Jul 10, 2024 at 21:10

Jessie Lulham · Accepted Answer · 2024-07-10 20:45:15Z

5

I decided to go back t a class based interceptor... In app.module.ts I've changed the providers as such:

  providers: [
    provideHttpClient(
      withInterceptorsFromDi()
    ),
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
  ],

then my interceptor has changed to be as such:

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor(private _authenticationService: AuthenticationService, @Inject('BASE_URL') private _baseUrl: string) { }

  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 currentUser = this._authenticationService.UserValue;
    const isLoggedIn = this._authenticationService.IsLoggedIn;
    const isApiUrl = request.url.indexOf(this._baseUrl) == 0;
    if (isLoggedIn && isApiUrl) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentUser.authData}`
        }
      });
    }

    return next.handle(request);
  }
}

answered Jul 10, 2024 at 20:45

Jessie Lulham

1801 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gyalbu Sherpa Dec 5, 2024 at 5:18

yes, this worked for me as well.

amritashan · Accepted Answer · 2024-07-11 19:29:11Z

1

@Jessie Lulham, I think you are simply using the incorrect Inject from @angular/core.

use this instead (lowercase inject, instead of the uppercase Inject):

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

Then you should be able to inject any injectable resource as:

const authenticationService = inject(AuthenticationService);

// do whatever
if (authenticationService.isLoggedIn) {
  // blah blah
}

answered Jul 11, 2024 at 19:29

amritashan

5834 silver badges21 bronze badges

3 Comments

Jessie Lulham Over a year ago

this solution has led me to this error: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext An error I recently had to overcome while integrating a variety of datatable plugins (Ag Grid, mattables, primeng, etc) I corrected those inject issues by setting the path to those dependencies in tsconfig... I don't see that as a solution here. It would appear my best option would be to continue using InterceptorsFromDi, although eliminating the overhead of class creation would be nice

Tovar Over a year ago

@JessieLulham try using an arrow function instead of a named function

amritashan Over a year ago

@JessieLulham, just as the error indicates, inject() needs to be called from a constructor. If you call it from any other function, it will throw that error.

Winthorpe · Accepted Answer · 2024-07-12 10:49:49Z

0

The way to provide the interceptor depends on what type it is. Either functional and class/DI-based.

provideHttpClient(withInterceptors([jwtInterceptor])

is only used to provide the function-based http interceptors: i.e. that implements the HttpInterceptorFn interface.

withInterceptorsFromDi()

is the way to provide class-cased http interecptors: i.e. that implements the HttpInterceptor interface.

Migrating to the functional type

In terms of migrating to the functional type, the key change is to use Angular's inject API to retrieve dependencies.

In your example:

const authenticationService = inject(AuthenticationService);

answered Jul 12, 2024 at 10:49

Winthorpe

1,2724 gold badges22 silver badges43 bronze badges

Comments

Katana24 · Accepted Answer · 2025-01-08 11:28:53Z

I would add the following:

If you move to the HttpInterceptorFn pattern your function should look something like this:

export const customInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {

    const exampleService = inject(MyService);

    // Your code e.g. XSRF, checking url etc.
    // exampleService.foo();
    return next(req);
};

Notice that we're injecting a required service in the function itself, whereas if we were using the class based approach we'd do the following:

constructor(private exampleService: ExampleService) {}

And to use the function approach we modify our ApplicationConfig like so:

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    provideHttpClient(
      withInterceptors([
        customInterceptorFn
      ])
    )
  ]
};

khelwood · Accepted Answer · 2025-01-08 11:34:46Z

0

If you are using Angular 18, go inside main.ts and make following changes:

bootstrapApplication(AppComponent, {providers: [
  provideHttpClient(
    withInterceptors([ exampleInterceptorInterceptor]),
  )
]}).catch((err) => console.error(err));;

edited Jan 8 at 11:34

khelwood

59.7k14 gold badges91 silver badges116 bronze badges

answered Nov 4, 2024 at 2:16

Sarad Vishwakarma - Fullstack

11 bronze badge

1 Comment

Yunnosch Jan 8 at 11:33

Please, edit and try for How to Answer, describe the effect of what you propose and explain why it helps to solve the problem.

Collectives™ on Stack Overflow

HttpInterceptors and Dependency Injection Angular 18

5 Answers 5

1 Comment

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related