Menu
When I try to instantiate the HttpClient service in an external library, then consume that library in an Angular application, I'm getting StaticInjectorError errors:
With Angular 5.0.0:
AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error:
StaticInjectorError[InjectionToken DocumentToken]:
StaticInjectorError[InjectionToken DocumentToken]:
NullInjectorError: No provider for InjectionToken DocumentToken!
at _NullInjector.get (core.js:993)
at resolveToken (core.js:1281)
at tryResolveToken (core.js:1223)
at StaticInjector.get (core.js:1094)
at resolveToken (core.js:1281)
at tryResolveToken (core.js:1223)
at StaticInjector.get (core.js:1094)
at resolveNgModuleDep (core.js:10878)
at _createClass (core.js:10919)
at _createProviderInstance$1 (core.js:10889)
With Angular 5.2.0-rc.0:
ERROR Error: StaticInjectorError(AppModule)[HttpXsrfTokenExtractor ->
InjectionToken DocumentToken]: StaticInjectorError(Platform:
core)[HttpXsrfTokenExtractor -> InjectionToken DocumentToken]:
NullInjectorError: No provider for InjectionToken DocumentToken!
at _NullInjector.get (core.js:994)
at resolveToken (core.js:1292)
at tryResolveToken (core.js:1234)
at StaticInjector.get (core.js:1102)
at resolveToken (core.js:1292)
at tryResolveToken (core.js:1234)
at StaticInjector.get (core.js:1102)
at resolveNgModuleDep (core.js:10836)
at _createClass (core.js:10877)
at _createProviderInstance$1 (core.js:10847)
I reproduced this with a blank @angular/cli application importing a blank library seed from angular-library-starter which just imports and tries to use HttpClient:
(import lines truncated for brevity)
Application: app.module.ts:
@NgModule({
declarations: [ AppComponent ],
imports: [ ..., ArithmeticModule.forRoot() ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Application: app.component.ts:
@Component({
...
})
export class AppComponent {
constructor(private sum: SumService) {}
}
For the library, all I did was import HttpClientModule in the library module, and then try to inject it in SumService:
Library: arithmetic.module.ts:
@NgModule({
imports: [ HttpClientModule ]
})
export class ArithmeticModule {
public static forRoot(): ModuleWithProviders {
return {
ngModule: ArithmeticModule,
providers: [ SumService ]
};
}
}
Library: sum.service.ts:
@Injectable()
export class SumService {
constructor(private http: HttpClient) {}
....
}
This setup causes the StaticInjectorError errors mentioned at the top of the post.
@angular/common/http/ng.common.http as external/global.Any ideas?
287
Angular provides a client HTTP API for Angular applications, the HttpClient service class in @angular/common/ http. The HTTP client service offers the following major features. The ability to request typed response objects.
HttpClient is introduced in Angular 6 and it will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service. To start using the http service, we need to import the module in app.module.ts as shown below −
The httpError method handles the errors in Angular when making Http requests using the HttpClient API. The HTTP CRUD functions are created that we defined in the service file now.
HttpClient API is observable based, so to bind the create, read, update and delete HTTP requests with RxJS observable import Observable, throwError from rxjs module. For managing error handling with Angular HttpClient, you need to import retry and catcherror operators from the rxjs/operators module.
The way your are consuming the sum.service is just a sub module of the main module, which is your app.module.ts. The HttpClientModule will need to be imported into the app.module.ts to be consumed by any sub module.
The reason you don't get an error with AOT is because in that sense there is a different injector.
In the app.module.ts
@NgModule({
imports: [ HttpClientModule ]
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
