Angular TypeError:无法读取属性'；非静态分离器

我目前正在尝试在我的angular应用程序中实现azure ad身份验证。不幸的是，我遇到了一个我不理解的错误。在我的应用程序中，我调用angular-oauth2-oidc包的tryLogin函数。在调用此函数之前，登录一直有效，因为它会导致以下错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nonceStateSeparator' of null
TypeError: Cannot read property 'nonceStateSeparator' of null
    at OAuthService.push../node_modules/angular-oauth2-oidc/esm5/angular-oauth2-oidc.js.OAuthService.tryLogin

不过，登录功能似乎可以工作，因为它将令牌作为应用程序url中的参数返回

我的代码：

export class AppComponent implements OnInit {
  title = 'test';

  constructor(private oauthService: OAuthService) {

  }

  private async ConfigureAuth(): Promise<void> {
    this.oauthService.loginUrl = 'loginurl';
    this.oauthService.clientId = 'clientid';
    this.oauthService.resource = 'resource';
    this.oauthService.logoutUrl = 'logoutUrl';
    this.oauthService.redirectUri = window.location.origin + '/';
    this.oauthService.scope = 'openid';
    this.oauthService.oidc = true;
    this.oauthService.setStorage(sessionStorage);
  }

  async ngOnInit() {
    console.log('Starting ngInit');

    await this.ConfigureAuth();
    console.log('Await passed ngInit');

    this.oauthService.tryLogin({}); //ERROR here

    console.log('TryLogin passed ngInit');

    if(!this.oauthService.getAccessToken()) {
      console.log('no accestoken - ngInit');
      await this.oauthService.initImplicitFlow();
    }
    console.log(this.oauthService.getAccessToken());
    console.log('Finished ngInit');
  }
}

导出类AppComponent实现OnInit{
标题=‘测试’；
构造函数（专用oauthService:oauthService）{
}
专用异步配置身份验证（）：承诺{
this.oauthService.loginUrl='loginUrl'；
this.oauthService.clientId='clientId'；
this.oauthService.resource='resource'；
this.oauthService.logoutUrl='logoutUrl'；
this.oauthService.redirectUri=window.location.origin+'/'；
this.oauthService.scope='openid'；
this.oauthService.oidc=true；
this.oauthService.setStorage（sessionStorage）；
}
异步ngOnInit（）{
console.log（'Starting ngInit'）；
等待此消息。ConfigureAuth（）；
log（'Await passed ngInit'）；
this.oauthService.tryLogin（{}）；//此处出错
log（'TryLogin passed ngInit'）；
如果（！this.oauthService.getAccessToken（））{
log（'no accestoken-ngInit'）；
等待这个.oauthService.initImplicitFlow（）；
}
log（this.oauthService.getAccessToken（））；
console.log（'Finished ngInit'）；
}
}

---

我希望有人能帮我解决这个问题。

您不应该单独设置配置值。显然，库中没有一个config对象，该对象应该使用

configure

方法传递：

private configureAuth(): void {
  this.oauthService.configure({
    loginUrl: 'loginurl',
    clientId,
    resource,
    logoutUrl
    // ... etc
  });      

  this.oauthService.setStorage(sessionStorage);
}

另外，在当前的实现中，

异步

。

configureAuth

中没有异步的方法

旁注：最好为oauth配置创建一个单独的配置文件，并将其导入组件中

---

更好的做法是在组件中不包含这种业务逻辑。这是一项服务的工作。尽量使您的组件变得愚蠢

谢谢，这对我很有用。谢谢你的建议，我会跟进的