Having trouble making 2 interceptors (httpInterceptorProviders, jwtInterceptorProviders) work globally in my lazy modules. I have a CoreModule and X number of lazy-loaded modules. Interestingly, autogenerated code by the Swagger generator (HTTP services) gets intercepted, but custom HTTP services do not.
In index.ts where the providers are obtained:
/** Http interceptor providers in outside-in order */
export const httpInterceptorProviders = [
{ provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true }
];
export const jwtInterceptorProviders = [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
];
In CoreModule, I import my interceptors in the providers section:
@NgModule({
imports: [
// angular
CommonModule,
HttpClientModule,
// Rest of the imports...
],
declarations: [],
providers: [
// Other service providers...
httpInterceptorProviders,
jwtInterceptorProviders,
// More providers...
],
exports: [TranslateModule]
})
export class CoreModule {
// Constructor and other functions...
}
// HttpLoaderFactory function definition...
AppModule:
@NgModule({
// Declarations, imports, bootstrap...
})
export class AppModule {}
Interceptor:
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
// Interceptor logic implementation...
}
Lazy load module:
@NgModule({
// Lazy loaded module configuration...
})
export class PetsModule {}
If I export my 2 interceptors in PetsModule, they intercept the requests. However, I want to import them only once in the CoreModule. Check out this example on StackBlitz for reference: StackBlitz Example. Also, make sure to import HttpClientModule only in the CoreModule.