How to provide the customer with all the lazy loadable modules

Question

My application uses the Lazy Loading subcomponent strategy. At the top level of the application, I have a custom HTTP provider that intercepts all ajax calls.

providers:[{ provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, cookieService: CookieService) => new CustomHttp(backend, defaultOptions, cookieService), deps: [XHRBackend, RequestOptions, CookieService] }] 

My lazy loaded modules do not affect this custom provider. Is there any way to provide them to them? Without duplicating code in the providers property in the component.module file. Thanks!

Answer 1

I fixed it with @SkipSelf () . Each lazy module has its own injector, so it knows nothing about the advanced Http provider at the application level. While you inject the Http provider into your services (in lazy loadable modules) angular tries to find the Http provider in the module injector ... and find the original from "@ angular / http". But you need to find your extended Http provider, which is "visible" at the application level. So try adding @SkipSelf () before Http in your constructor:

 import { SkipSelf } from '@angular/core'; constructor(@SkipSelf() private http: Http) { }