再生

Question

我是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

然后添加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 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：没有OidcDataService的提供者

再生

1 个答案: