错误 NullInjectorError：NullInjectorError：没有 OktaAuthStateService 的提供者

Question

尝试在 Angular v17 中实现具有 Okta 身份验证的防护时，我遇到了一个错误，指示缺少 OktaAuthStateService 的提供程序。
通过 Okta 登录后，我可以访问登录状态组件。但是，当尝试使用路由导航到仪表板时，我遇到了与缺少提供程序（特别是 OktaAuthStateService）相关的错误。

auth.guard.ts

import { Router, UrlTree, } from '@angular/router';
import {  Injectable } from '@angular/core';
import { OktaAuthStateService } from '@okta/okta-angular';
import { Observable, map, take } from 'rxjs';

@Injectable({ providedIn: 'root' }) export class AuthGuard { constructor( public authStateService: OktaAuthStateService, private router: Router ) {}

canActivate(): Observable<boolean | UrlTree> { 
return this.authStateService.authState$.pipe( map((loggedIn) => { console.log('loggedIn', loggedIn);
if (!loggedIn) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }),
  take(1)
);
} }

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { OktaAuthModule, OKTA_CONFIG } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';
import myAppConfig from './app.config';
const oktaConfig = myAppConfig.oidc;
const oktaAuth = new OktaAuth(oktaConfig);

@NgModule({
declarations: [],
imports: [OktaAuthModule],
providers: [{ provide: OKTA_CONFIG, useValue: { oktaAuth } }],
bootstrap: [AppComponent],
})
export class AppModule {}

app.routes.ts

import { Routes, mapToCanActivate } from '@angular/router';
import { OktaCallbackComponent, OktaAuthGuard } from '@okta/okta-angular';
import { LoginComponent } from './modules/auth/components/login/login.component';
import { AuthGuard } from './core/guards/auth.guard';
import { DashboardComponent } from './modules/pages/dashboard/dashboard.component';
import { LoginStatusComponent } from './modules/auth/components/login-status/login-status.component';
import { CommonGuard } from './core/guards/common.guard';

export const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent,
},
{ path: 'login-status', component: LoginStatusComponent },
{ path: 'implicit/callback', component: OktaCallbackComponent },
{
path: 'dashboard',
canActivate: mapToCanActivate([AuthGuard]),
component: DashboardComponent,
},
];

Answer 1

您需要在模块中提供 OktaAuthStateService。