NullInjectorError：没有 InjectionToken MSAL_GUARD_CONFIG 的提供程序

Question

在为 MSAL 2.0 使用自定义包装器时出现错误

这里是包装 ts 文件

import { APP_INITIALIZER, InjectionToken, NgModule } from '@angular/core';
import { LogLevel, Configuration, BrowserCacheLocation, InteractionType, IPublicClientApplication, PublicClientApplication } from '@azure/msal-browser';
import { ConfigService } from './shared/services/config.service';
import jsonconfig from '../assets/environment/conf.json'
import { MatDialogRef } from '@angular/material/dialog';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MsalBroadcastService, MsalGuard, MsalGuardConfiguration, MsalInterceptor, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG } from '@azure/msal-angular';
 const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
 
 const AUTH_CONFIG_URL_TOKEN = new InjectionToken<string>('AUTH_CONFIG_URL');

 export function initializerFactory(env: ConfigService): any {
     // APP_INITIALIZER, except a function return which will return a promise
     // APP_INITIALIZER, angular doesnt starts application untill it completes
     const promise = env.init().then((value) => {
         console.log(env.getSettings('clientID'));
     });
     return () => promise;
 }


 
 export function MSALInstanceFactory(conf:ConfigService): IPublicClientApplication {
     const configuration:Configuration={
     auth: {
         clientId: conf.getSettings("clientId"), // This is the ONLY mandatory field that you need to supply.
         authority: 'https://login.microsoftonline.com/'+ conf.getSettings("tenentId"), // Defaults to "https://login.microsoftonline.com/common"
         redirectUri: conf.getSettings("redirectUri"), // Points to window.location.origin. You must register this URI on Azure portal/App Registration.
         postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
         navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
     },
     cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage, // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
         storeAuthStateInCookie: isIE, // Set this to "true" if you are having issues on IE11 or Edge
     },
     system: {
         loggerOptions: {
             loggerCallback(logLevel: LogLevel, message: string) {
                 console.log(message);
             },
             logLevel: LogLevel.Verbose,
             piiLoggingEnabled: false
         }
     }
    }
    return new PublicClientApplication(configuration);
 }

 
 export const silentRequest = {
     scopes: ["openid", "profile"],
     loginHint: "example@domain.net"
 };

 
export const loginRequest = {
    scopes: []
  };

  export function MSALInterceptorConfigFactory(conf:ConfigService): MsalInterceptorConfiguration {
    const protectedResources:Map<string, Array<string>>=new Map([
        ['https://graph.microsoft.com/v1.0/me', ['user.read']],
        [
          'api',
          [conf.getSettings("apiClientId") + '/user_impersonation'],
        ],
      ]);
    
    return {
      interactionType: InteractionType.Redirect,
      protectedResourceMap: protectedResources
    };
  }
  
  export function MSALGuardConfigFactory(): MsalGuardConfiguration {
    return { 
      interactionType: InteractionType.Redirect,
      authRequest: loginRequest
    };
  }
//-------------------------------------------------------------
@NgModule({
    providers: [
    ],
    imports: [MsalModule]
})
export class MsalConfModule{
    staticforroot() {
        return {
            providers: [
                { provide: AUTH_CONFIG_URL_TOKEN },
                { provide: APP_INITIALIZER, useFactory: initializerFactory,
                    deps: [ConfigService, 
                    AUTH_CONFIG_URL_TOKEN], 
                    multi: true 
                },
                {
                  provide: HTTP_INTERCEPTORS,
                  useClass: MsalInterceptor,
                  multi: true,
                  
                },
                {
                  provide: MSAL_INSTANCE,
                  useFactory: MSALInstanceFactory,
                  deps: [ConfigService]
                },
                {
                  provide: MSAL_GUARD_CONFIG,
                  useFactory: MSALGuardConfigFactory
                },
                {
                  provide: MSAL_INTERCEPTOR_CONFIG,
                  useFactory: MSALInterceptorConfigFactory,
                  deps: [ConfigService]
                },
                MsalService,
                MsalGuard,
                MsalBroadcastService
            ],
        }
    }

}

这是应用模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule,AppRoutingComonent } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'

import { MsalConfModule } from './authconfig';


const ngWizardConfig: NgWizardConfig = {
  theme: THEME.default
};


@NgModule({
  declarations: [
    AppComponent,
    AppRoutingComonent,
  
  
  ],
  imports: [
    BrowserModule,
    DataTablesModule,
    HttpClientModule,
    AppRoutingModule,
    MatDialogModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot(), // ToastrModule added,
    NgWizardModule.forRoot(ngWizardConfig),
    MsalConfModule
  ],
  providers: [
    {
    provide: MatDialogRef,
    useValue: {}
    }
],
  bootstrap: [AppComponent]
})
export class AppModule { 
  
}

没有编译错误。我在下面收到运行时错误

根据 J.Loscos 的回答，我已经更新了代码，但现在显示此错误

Type '{ provide: InjectionToken<string>; }' is not assignable to type 'Provider'.
  Type '{ provide: InjectionToken<string>; }' is missing the following properties from type 'Type<any>'

Answer 1

您的代码的问题是您在 staticforroot 方法中声明了注入令牌，但您没有使用此方法。

您似乎正在尝试使用 forRoot 模式进行模块导入。 要使用这种模式，模块中的 staticforroot 方法应该返回模块和提供者：

@NgModule({
    providers: [
    ],
    imports: [MsalModule]
})
export class MsalConfModule{
    staticforroot() : ModuleWithProviders<MsalConfModule>  {
        return {
            ngModule: MsalConfModule,
            providers: [
                { provide: AUTH_CONFIG_URL_TOKEN },
                { provide: APP_INITIALIZER, useFactory: initializerFactory,
                    deps: [ConfigService, 
                    AUTH_CONFIG_URL_TOKEN], 
                    multi: true 
                },
                ...
           ]
        };
     }

在你的 AppModule 中导入这个模块时，你需要调用 staticforroot 方法：

@NgModule({
  declarations: [
    AppComponent,
    AppRoutingComonent,
  
  
  ],
  imports: [
    BrowserModule,
    ...
    MsalConfModule.staticforroot()
  ],
  providers: [
    {
    provide: MatDialogRef,
    useValue: {}
    }
],
  bootstrap: [AppComponent]
})
export class AppModule { 
  
}