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，然后尝试将其注入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。这一切都导致了同样的问题。

有什么想法吗？

Answer 1

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

AOT不会出错的原因是因为从这个意义上说，存在不同的进样器。

在app.module.ts
中

// Zoom event listener
(viz.chart).on('dataZoom', function(e) {
  console.log('zoomed');
  console.log(e);
});

Answer 2

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

Answer 3

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

在这种情况下，

HttpClientModule 将是您的对等依赖项，

因此您必须在主应用程序中导入HttpClientModule。

Answer 4

我们正在使用HttpClient进行翻译模块。我正在使用下面的导入方式;

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

Answer 5

StaticInjectorError

尝试像在module.ts中导入HttpClient模块并将服务添加到提供程序中一样。

Angular不能在外部库中使用HttpClient

5 个答案: