NullInjectorError: InjectionToken MSAL_CONFIG的无提供者

Question

我正在尝试动态加载MSAL配置文件，但是我得到了一个错误：

NullInjectorError:没有为InjectionToken MSAL_CONFIG提供服务！

以下是代码：

import { NgModule, Optional, SkipSelf, APP_INITIALIZER } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { MsalModule, MsalInterceptor, MsalConfig, MsalService } from "@azure/msal-angular";
import { ConfigService } from "./config/config.service";
import { MSAL_CONFIG } from "@azure/msal-angular/dist/msal.service";

export function initConfiguration(configService: ConfigService) {
    // This will load the json file and store it in a variable
    return () => configService.init();
}

export function msalConfigFactory(configService: ConfigService): MsalConfig {
    // get the config from the service
    return configService.get();
}

@NgModule({
    imports: [CommonModule, HttpClientModule, MsalModule],
    declarations: [],
    providers: [
        ConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: initConfiguration,
            deps: [ConfigService],
            multi: true
        },
        {
            provide: MSAL_CONFIG,
            useFactory: msalConfigFactory,
            deps: [ConfigService]
        },
        MsalService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        }
    ]
})
export class CoreModule {
    constructor(
        @Optional()
        @SkipSelf()
        parentModule: CoreModule
    ) {
        if (parentModule) {
            throw new Error("CoreModule is already loaded. Import only in AppModule");
        }
    }
}

既然我确实提供了MSAL_CONFIG对象，我就不明白它为什么要抛出这个错误。

我试图把所有的东西都移到app.module中，但是我也得到了同样的错误。我在这里错过了什么？

Answer 1

尝试提供提供MSAL_CONFIG的自定义类或工厂：

providers: [
...
{
  provide: MSAL_CONFIG,
  useFactory: MSALConfigFactory
},
...
]

我的MSAL配置提供程序从“msal”返回“配置”：

import { Configuration } from 'msal';

export function MSALConfigFactory(): Configuration {
 return {
  auth: {
   clientId: 'id',
   authority: 'something',
   redirectUri: 'uri',
   postLogoutRedirectUri: 'uri',
  },
  cache: {
   cacheLocation: 'localStorage'
  },
 }
};

Answer 2

如果缺少的是MSAL_CONFIG，请尝试将提供程序：

/**
 * Here we pass the configuration parameters to create an MSAL instance.
 * For more info, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/configuration.md
 */
export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication(msalConfig);
}

/**
 * MSAL Angular will automatically retrieve tokens for resources 
 * added to protectedResourceMap. For more info, visit: 
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/initialization.md#get-tokens-for-web-api-calls
 */
 export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();

  protectedResourceMap.set(protectedResources.tutorAccess.endpoint, protectedResources.tutorAccess.scopes);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

/**
 * Set your default interaction type for MSALGuard here. If you have any
 * additional scopes you want the user to consent upon login, add them here as well.
 */
 export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { 
    interactionType: InteractionType.Redirect,
    authRequest: loginRequest
  };
}


@NgModule({
  ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent],
})

有关代码参考，请参阅注释部分的链接。

此外，如果为使用MSAL库的组件创建单元测试，则必须在*.spec.ts文件中包括上述提供程序。

Answer 3

import { MsalModule } from "@azure/msal-angular";
import { MsalService, MsalConfig } from "@azure/msal-angular";
import { MSAL_CONFIG } from "@azure/msal-angular/dist/msal.service";
import { MsalInterceptor } from "@azure/msal-angular/dist/msal.interceptor";

export function getConfig() {
  var request = new XMLHttpRequest();
  request.open('GET', "/api/settings", false);  // request application settings synchronous
  request.send(null);
  const response = JSON.parse(request.responseText);
  return response as MsalConfig;
}

@NgModule({
 imports: [
MsalModule
],
 providers: [
    MsalService,
    {
      provide: MSAL_CONFIG,
      useValue: getConfig()
    },
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: MsalInterceptor, 
      multi: true 
    },
] , 
bootstrap: [AppComponent]
})

如果你还没有找到解决方案，就试一试