NullInjectorError: 没有 MsalService 的提供者

Question

我在我的应用程序中添加了 Azure SSO，但是在尝试创建 PR 时，构建失败并出现错误， NullInjectorError：没有 MsalService 的提供者！

我已经通过管道看起来像这个命令ng test --watch=false --code-coverage=false --browsers=ChromeHeadless在管道中运行并且我的构建失败。 在单元测试中像下面这样结束

##[错误]错误：Npm 失败，返回码：1

我更改的文件：

package.json

{
 "dependencies": {
  "@azure/msal-angular": "^2.2.0",
  "@azure/msal-browser": "^2.28.2",
  "msal": "^1.4.17",
 }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015", // changed this from es5 to es2015
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

添加了一个新文件： auth-config.ts

import { Configuration } from "@azure/msal-browser";
import { environment } from "../environments/environment";
import { AuthService } from "./auth/auth.service";

export function msalConfig(): Configuration {
    return {
        auth: {
        clientId: AuthService.getClientId(),
        redirectUri: environment.ssoRedirectUrl,
        authority: AuthService.getDirectoryIdUrl(),
        },
    }
};

这就是我的app.module.ts 的样子：

import { MSAL_INSTANCE, MsalModule, MsalService } from "@azure/msal-angular";
import { IPublicClientApplication, PublicClientApplication } from "@azure/msal-browser";
import { environment } from "../environments/environment";
import { msalConfig } from "./auth-config";

export const MSALInstanceFactory = (): IPublicClientApplication => new PublicClientApplication(msalConfig());
   
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // other modules
    MsalModule,
  ],
  providers: [
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    MsalService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

帮助我了解我所缺少的，因为我已经阅读了多篇与之相关的文章，但没有一篇奏效。

Answer 1

Angular 在层次结构中的任何注入器中都找不到 MsalService。 您是否也在测试中提供了服务？

Answer 2

所以我得到了这个问题的解决方案。 实际上我是通过 DI 从我的内部服务 (auth.service.ts) 调用 MsalService，这在单元测试中失败了（不知道为什么？）

所以，我做了一些工作，并开始从另一个组件调用它。 现在一切都很好。

谢谢。

Answer 3

您能否添加代码以便更好地理解。 我也面临同样的问题。