web-dev-qa-db-ja.com

Angular外部ライブラリでHttpClientを使用できません

外部ライブラリで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で試しました。それはすべて同じ問題になります。

何か案は？

angularangular-httpclient
19
Mike

同様の問題が発生し、NgxMaskModule（2.2.2）のアップグレードを修正し、モジュールのインポートにNgxMaskModule.forRoot（）を追加しました。

0
Sannon Aragão

翻訳モジュールにはHttpClientを使用しています。以下のインポート方法を使用しています。

// translate
HttpClientModule,
TranslateModule.forRoot({
       loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    }),
0
Tanser Çobanoğlu

App.module.ts。にHttpClientモジュールをインポートしてみてください

HttpClientModuleこの場合、ピアの依存関係になります。

したがって、メインアプリにHttpClientModuleをインポートする必要があります。

0
Abhishek Gangwar

StaticInjectorError

Module.tsにHttpClientモジュールをインポートして、プロバイダーにサービスを追加してみてください。

0
Nagendra Pantham