Unable to inject service in http interceptors

Question

How do I need to set up this HttpInterceptor? oidcSecurityService is not defined.

The HttpClient allows you to write interceptors. A common usecase would be to intercept any outgoing HTTP request and add an authorization header. Keep in mind that injecting OidcSecurityService into the interceptor via the constructor results in a cyclic dependency. To avoid this use the injector instead.

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    private oidcSecurityService: OidcSecurityService;

    constructor(private injector: Injector) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let requestToForward = req;

        if (this.oidcSecurityService === undefined) {
            this.oidcSecurityService = this.injector.get(OidcSecurityService);
        }
        if (this.oidcSecurityService !== undefined) {
            let token = this.oidcSecurityService.getToken();
            if (token !== '') {
                let tokenValue = 'Bearer ' + token;
                requestToForward = req.clone({ setHeaders: { Authorization: tokenValue } });
            }
        } else {
            console.debug('OidcSecurityService undefined: NO auth header!');
        }

        return next.handle(requestToForward);
    }
}

This is in my app.module. I need to get the OidcSecurityService injected.

  providers: [
    OidcSecurityService,
    OidcConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfig,
      deps: [OidcConfigService],
      multi: true
    },   
    AuthorizationGuard,
    {
      provide: HTTP_INTERCEPTORS, 
      useClass: AuthInterceptor, 
      multi: true
    }    
  ]

Why don't you injec the service in the constructor? The injector class was used in Angular 4.X due to a bug. — NicuVlad, Oct 11 '19 at 06:03
I'm new to Angular and was using the code that was provided. So, I could just inject OidcSecurityService? — Jason Jay, Oct 11 '19 at 11:17
@NicuVlad injecting service in constructor of interceptor causes circular dependency errors most of the times. — Anand Bhushan, Oct 11 '19 at 13:11
@AnandBhushan, from what I know this was fixed, check this: https://stackoverflow.com/a/48903734/3018671 — NicuVlad, Oct 14 '19 at 16:33

score 7 · Accepted Answer · answered Oct 11 '19 at 06:00

Try this-

@Injectable()
            export class AuthInterceptor implements HttpInterceptor {
                private oidcSecurityService: OidcSecurityService;

                constructor(private injector: Injector) { }

                intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
                    let requestToForward = req;
                    this.oidcSecurityService = this.injector.get(OidcSecurityService);
                    let token = this.oidcSecurityService.getToken();
                    if (token !== '') {
                        let tokenValue = 'Bearer ' + token;
                        requestToForward = req.clone({ setHeaders: { Authorization: tokenValue } });
                    }


                    return next.handle(requestToForward);
                }
            }
        }

This worked. But what? I see you removed the condition checks. — Jason Jay, Oct 11 '19 at 11:18

score 1 · Answer 2 · answered Oct 14 '19 at 16:37

You can inject the service directly in the constructor:

   constructor(private oidcSecurityService : OidcSecurityService) { }

There was a bug regarding the injection of a service in a constructor but this was fixed in:

Angular 5.2.3 released 31 January 2018

Please check this answer: https://stackoverflow.com/a/48903734/3018671

Unable to inject service in http interceptors

2 Answers2