NullInjectorError:没有OidcDataService的提供者

Question

我是OpenID和Angular的新手,我正在尝试使用该angular-auth-oidc-client软件包.达米恩博德和 埃兰德森有一些很好的例子,但我似乎无法摆脱起跑线.

安装软件包之后,我所要做的就是注入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'.

我的谷歌已发现任何看起来没有相关性的内容,并且它在整合软件包的过程中如此早地阻塞,我必须在某处如何将所有内容链接在一起做出错误的假设.谁能看到它？

再现

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

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是包的一部分.我认为这是样品围绕包装构建的东西.angular-auth-oidc-client自述文件中的简短示例为我设置了正确的轨道

所以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提供的内容提供给App的其余部分.

我发现这篇文章有助于填补这个漏洞.