NullInjectorError: No provider for OidcDataService

Question

我是 OpenID 和 Angular 的新手，正在尝试使用 angular-auth-oidc-client 包。 damienbod and 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 没有发现任何相关的东西，而且它在集成包的过程中这么早就阻塞了，我一定是在某个地方做了一个错误的假设 link 一切都在一起。有人能看到吗？

正在复制

我可以用最小的项目重现。使用以下步骤创建项目：

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

然后添加 Oidc 服务，使 app.module.ts 看起来像这样：

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

Answer 1

好的。我想我知道我错在哪里了。样本很好，但它们足够复杂，以至于我不认为 AuthModule 是包的一部分。我认为这是示例构建 around 包的东西。 angular-auth-oidc-client README 中的简短示例使我走上正轨

所以 AuthModule 需要导入（我更大的真实项目），但它还需要调用 AuthModule.forRoot() 以包含在 AppModule imports 元数据（我更大的真实项目没有）。

通过这些更新，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 提供的内容提供给整个应用程序的其余部分。

我发现 this article 有助于填补那个洞。

NullInjectorError: No provider for OidcDataService

NullInjectorError: No provider for OidcDataService

openid

angular

angular5

正在复制