angulartypescriptserviceinjectableangular6

Angular 6: provide HTTP_INTERCEPTORS for 'root'

With the change from Angular 5 where you provide service in AppModule to Angular 6 where you set 'provideIn' key in @Injectable decorator I have changed all services to use new "provideIn" method. However, exception is my Interceptor Service.

How can I provide HTTP_INTERCEPTORS token for 'root' and use InterceptorService?

this is the Angular 5 way I use atm:

@Injectable()
export class InterceptorService implements HttpInterceptor {
...
}

in AppModule:

providers: [{
  provide: HTTP_INTERCEPTORS,
  useClass: InterceptorService,
  multi: true
}]

But what would be Angular 6 way?

I've tried something like

@Injectable({
  provideIn: 'root',
  useValue: HTTP_INTERCEPTORS,
  deps: [forwardRef(() => InterceptorService)]
})
export class InterceptorService implements HttpInterceptor {
...
}

and a lot of other variants with Injectable but can't seem to figure out how to make it work without writing an object literal directly into providers of a module.

Solution

  • The provideIn-property of Angular 6 is just an addition to the behaviour in Angular 5. If you want to provide something with an already existing InjectionToken, you still have to use the { provide: ClassA, useClass: ClassB } syntax.

    See -> https://angular.io/guide/dependency-injection-in-action#external-module-configuration

    tl;dr: The way you provide HTTP_INTERCEPTORS has not changed in Angular 6 and there is no "Angular 6"-way.