Angular can't use HttpClient in external library

Question

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.

• In the rollup config, I've added @angular/common/http/ng.common.http as external/global.
• I've tried this with many different setups, library seeds, with rollup, and with webpack. It all results in the same issue.

Any ideas?

Answer 1

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 ]
})