NullInjectorError: No provider for MsalService

Question

I have added Azure SSO in my application, but when trying to create PR, the build is failing with an error, NullInjectorError: No provider for MsalService!

I have gone through the pipeline looks like this command ng test --watch=false --code-coverage=false --browsers=ChromeHeadless is running in pipeline and failing my build. Ending like below in unit tests

##[error]Error: Npm failed with return code: 1

Files I have made changes in:

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"
    ]
  }
}

Added a new file: 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(),
        },
    }
};

And this is what my app.module.ts looks like:

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 { }

Help me understand what I am missing, as I have gone through multiple articles related to it, but none worked.

Answer 1

Angular cannot find MsalService in any injector in the hierarchy. Have you provided the service in the tests as well?

Answer 2

So I got the solution for this issue. Actually I was calling MsalService from my internal service (auth.service.ts) through DI, which is failing on unit tests(don't know why?)

So, I did some work around and started calling it from another component. And now everything is fine.

Thanks.

Answer 3

Can you please add code for better understanding. I am also facing same issue.