Angular 不能在外部库中使用 HttpClient答案

【问题标题】：Angular can't use HttpClient in external libraryAngular 不能在外部库中使用 HttpClient
【发布时间】：2018-01-09 18:30:09
【问题描述】：

当我尝试在外部库中实例化 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，然后尝试将其注入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 添加为外部/全局。
我已经尝试了许多不同的设置、库种子、汇总和 webpack。这都会导致相同的问题。

有什么想法吗？

【问题讨论】：

HttpClient 在 HttpClientModule 中定义。
您是否也尝试在库模块中导出HttpClientModule？我喜欢做的是让@angular/common 成为对等依赖项，并让托管应用程序通过在应用程序模块中导入HttpClientModule 来处理其余的事情。
我刚刚意识到这实际上适用于 AoT，但不适用于 JIT。 ng serve 失败，但 ng serve --aot 没有。
@Mike 有什么更新吗？你解决了这个问题吗？
是的。我也遇到过这个问题。有什么解决办法吗？

标签： angular angular-httpclient

【解决方案1】：

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

您在使用 AOT 时没有收到错误的原因是因为从这个意义上说存在不同的注射器。

在 app.module.ts 中

@NgModule({
  imports: [ HttpClientModule ]
})

【讨论】：

【解决方案2】：

我遇到了类似的问题并修复了升级 NgxMaskModule (2.2.2) 并在模块导入中添加了 NgxMaskModule.forRoot()。

【讨论】：

很遗憾我没有使用那个模块。但我可能会看看他们在上次更新中所做的更改。也许这给了我一些线索
检查导入顺序。 HttpModule 必须在 HttpClientModule 之前导入。喜欢：导入：[ BrowserModule, FormsModule, HttpModule, HttpClientModule ]
这是我进口的当前顺序，问题仍然存在。我尝试了不同的排序方式，但并没有真正的帮助。

【解决方案3】：

我们使用 HttpClient 作为翻译模块。我正在使用下面的导入方式；

// translate
HttpClientModule,
TranslateModule.forRoot({
       loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    }),

【讨论】：

【解决方案4】：

尝试在您的 app.module.ts 中导入 HttpClient 模块。

HttpClientModule 在这种情况下将是您的对等依赖项，

所以你必须在你的主应用程序中导入 HttpClientModule。

【讨论】：

【解决方案5】：

StaticInjectorError

尝试在 module.ts 中导入 HttpClient 模块并将服务添加到提供程序可能会起作用。

【讨论】：