2

現在、以下のようなモジュール設定があります（抜粋）。

AppModule

  RoutingModule
    AuthRouteGuard

  AuthModule
    LoginFormComponent
    AuthService

my AuthService(ユーザー認証の処理を担当し、現在のユーザーが認証されているかどうかを判断する方法を提供する) を my のプロバイダーとして定義しましたAuthModule。

// auth.module.ts - uses https://github.com/auth0/angular2-jwt

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
    tokenName: jwtLocalStorageKey
  }), http, options);
}

export let authHttpServiceProvider = {
  provide: AuthHttp,
  useFactory: authHttpServiceFactory,
  deps: [Http, RequestOptions]
};

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [AuthComponent],
  declarations: [AuthComponent, LoginComponent, RegisterComponent],
  providers: [
    AuthService,
    authHttpServiceProvider
  ]
})
export class AuthModule { }

このサービスは兄弟内で問題なく使用できますLoginFormComponent。ただし、クラスAuthService内でを使用しようとすると、次のエラーが発生します。AuthRouteGuardRoutingModule

Error: Invalid provider for the NgModule 'AuthModule' - only instances of Provider and Type are allowed, got: [?undefined?, ...]

内にAuthModuleインポートしましたRoutingModule。上記のエラーAuthServiceは、 が の依存関係として定義されるとすぐに発生しAuthRouteGuardます。

export class AuthRouteGuard implements CanActivate {
  constructor(
    private router: Router,
    private authService: AuthService // Removing this injection removes the error
  ) {}

  canActivate() {
    // @todo: if not authenticated
    this.router.navigate(['/login']);

    return true;
  }
}

ここで何が欠けていますか?また、コンストラクターにサービスを注入すると、その注入が削除されたときに発生しない無効なプロバイダーエラーが発生するのはなぜですか?

編集authHttpServiceProvider-プロバイダーを完全に削除すると同じエラーが発生するため、AuthModuleモジュールは次のようになります。

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [AuthComponent],
  declarations: [AuthComponent, LoginComponent, RegisterComponent],
  providers: [
    AuthService
  ]
})
export class AuthModule { }
4

2 に答える 2

0

authHttpServiceProviderモジュールのインポートに追加します。グローバルにエクスポートされ、モジュールでは使用できません。モジュールのプロバイダーが不明なため、サービスを提供できません。

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [AuthComponent],
  declarations: [AuthComponent, LoginComponent, RegisterComponent],
  providers: [
    AuthService
  ]
})
export class AuthModule {
于 2017-03-19T13:26:50.820 に答える