web-dev-qa-db-ja.com

NullInjectorError：OidcDataServiceのプロバイダーがありません

私はOpenIDとAngularを初めて使用し、angular-auth-oidc-clientパッケージを利用しようとしています。 damienbod と elanderson の素晴らしい例がいくつかありますが、スターティングブロックから抜け出すことすらできないようです。

パッケージをインストールした後、私がしなければならないのはOidcSecurityServiceを注入することだけです-私もそれを使用する必要はありません-そして私はランタイムエラーを受け取ります：

StaticInjectorError(AppModule)[OidcSecurityService -> OidcDataService]: 
  StaticInjectorError(Platform: core)[OidcSecurityService ->  OidcDataService]: 
    NullInjectorError: No provider for OidcDataService!
...

私の自然な考えは、OidcDataServiceをインポートしてプロバイダーに追加することでしたが、その結果、コンパイラエラーが発生します。

ERROR in src/app/app.module.ts(3,31): error TS2305: 
  Module '"<...>/auth-test/node_modules/angular-auth-oidc-client/index"' 
    has no exported member 'OidcDataService'.

私のGoogle-fuは関連性があると思われるものを何も発見しておらず、パッケージを統合するプロセスの非常に早い段階でブロックしているので、すべてをリンクする方法についてどこかで悪い仮定をしているに違いありません。誰でも見ることができますか？

再現

最小限のプロジェクトで再現できます。次の手順でプロジェクトを作成します。

ng new auth-test
npm install angular-auth-oidc-client --save

次に、app.module.tsが次のようになるようにOidcサービスを追加します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OidcSecurityService } from 'angular-auth-oidc-client';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule ],
  providers: [ OidcSecurityService ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
  constructor(
      private oidcSecurityService: OidcSecurityService
  ) {
    // I would configure my STS Server, etc, if I could just get past this bug.
  }
}

次に、それを提供し、ランタイムエラーについてコンソールを表示します。

ng serve
angularopenidangular5
7
TwainJ

OK。どこが悪かったのかわかります。サンプルは優れていますが、AuthModuleがパッケージの一部であるとは思わなかったほど複雑です。サンプルがパッケージの周りに構築するものだと思いました。 angular-auth-oidc-client README の簡単な例は、私を正しい方向に導きます

したがって、AuthModuleをインポートする必要があります（私のより大きな実際のプロジェクトはインポートしました）が、AppModuleimportsに含めるにはAuthModule.forRoot()の呼び出しも必要です。メタデータ（私のより大きな実際のプロジェクトはそうではありませんでした）。

したがって、これらの更新により、app.module.tsは次のようになります。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AuthModule, OidcSecurityService } from 'angular-auth-oidc-client';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot(),
    RouterModule.forRoot([{path: "", component:AppComponent}])

  ],
  providers: [OidcSecurityService],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(
      private oidcSecurityService: OidcSecurityService
  ) {
    // Now I can configure my STS Server, and off I go.
  }
}

そして動作します。 RouterModuleが依存するAuthModuleも追加されていることに注意してください。これは、.forRoot()であり、どちらも実際のプロジェクトに含まれていましたが、追加する必要がありました。この最小限の概念実証に。

.forRoot()の周りに私の理解に穴があることが明らかになりました。つまり、AuthModuleが提供するものがアプリの残りの部分全体に提供されていることを確認する必要があります。

この記事 その穴を埋めるのに役立ちました。

14
TwainJ