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'.

我的Google-fu没有发现任何似乎相关的东西，而且它在集成包的过程中很早就阻塞了，所以我肯定在某个地方做了一个关于如何将所有东西连接在一起的错误假设。有人能看见吗？

再生产

我可以用一个最小的项目来复制。使用以下步骤创建项目：

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是包的一部分。我以为这是样品在包裹周围建立的东西。oidc-客户机自述中的简单示例使我走上了正确的轨道

因此，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提供的东西提供给整个应用程序。

我发现这篇文章在填补那个洞方面很有帮助。