Angular 无法在外部库中使用 HttpClient

Question

当我尝试在外部库中实例化 HttpClient 服务，然后在 Angular 应用程序中使用该库时，我遇到了 StaticInjectorError 错误:

使用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)

使用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)

我用一个空白的 @angular/cli 应用程序复制了这个，从 angular-library-starter 导入了一个空白的库种子它只是导入并尝试使用 HttpClient:

(为简洁起见截断了导入行)

应用程序:app.module.ts:

@NgModule({
  declarations: [ AppComponent ],
  imports: [ ..., ArithmeticModule.forRoot() ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

应用程序:app.component.ts:

@Component({
  ...
})
export class AppComponent {
  constructor(private sum: SumService) {}
}

对于库，我所做的只是在库模块中导入HttpClientModule，然后尝试将其注入(inject)到SumService中:

库:arithmetic.module.ts:

@NgModule({
    imports: [ HttpClientModule ]
})
export class ArithmeticModule {
    public static forRoot(): ModuleWithProviders {
        return {
            ngModule: ArithmeticModule,
            providers: [ SumService ]
        };
    }
}

库:sum.service.ts:

@Injectable()
export class SumService {
  constructor(private http: HttpClient) {}
  ....
}

此设置会导致帖子顶部提到的 StaticInjectorError 错误。

• 在汇总配置中，我添加了 @angular/common/http/ng.common.http 作为外部/全局。
• 我已经尝试过许多不同的设置、库种子、rollup 和 webpack。所有这些都会导致同一个问题。

有什么想法吗？

Answer 1

您使用 sum.service 的方式只是主模块的一个子模块，即您的 app.module.ts。 HttpClientModule 将需要导入到 app.module.ts 中以供任何子模块使用。

AOT 没有出现错误的原因是因为在这个意义上有不同的注入(inject)器。

In the app.module.ts

@NgModule({
  imports: [ HttpClientModule ]
})