Circular dependency in DI detected for MsalService

[notreniev]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

@azure/msal-angular 3.1.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

@azure/msal-angular 3.1.0

Public or Confidential Client?

Public

Description

When running Jest tests my application started out throwing "Circular dependency in DI detected for MsalService" after migrating to @azure/msal-angular v3.1.0 and azure/msal-browser v3.27.0.

This is happening only when I run the tests, which wasn't happening before the migration.

I believe that if you also update your sample here:

You'll get the same error.

Error Message

NG0200: Circular dependency in DI detected for MsalService. Find more at https://angular.dev/errors/NG0200

  at throwCyclicDependencyError (node_modules/@angular/core/fesm2022/core.mjs:963:11)
  at R3Injector.hydrate (node_modules/@angular/core/fesm2022/core.mjs:3231:17)
  at R3Injector.get (node_modules/@angular/core/fesm2022/core.mjs:3099:33)
  at injectInjectorOnly (node_modules/@angular/core/fesm2022/core.mjs:1107:40)
  at ɵɵinject (node_modules/@angular/core/fesm2022/core.mjs:1113:42)
  at Object.UserService_Factory [as factory] (ng:\UserService\ɵfac.js:5:55)
  at node_modules/@angular/core/fesm2022/core.mjs:3237:47
  at runInInjectorProfilerContext (node_modules/@angular/core/fesm2022/core.mjs:872:9)
  at R3Injector.hydrate (node_modules/@angular/core/fesm2022/core.mjs:3236:21)
  at R3Injector.get (node_modules/@angular/core/fesm2022/core.mjs:3099:33)
  at R3Injector.get (node_modules/@angular/core/fesm2022/core.mjs:3109:33)
  at ChainedInjector.get (node_modules/@angular/core/fesm2022/core.mjs:5454:36)
  at lookupTokenUsingModuleInjector (node_modules/@angular/core/fesm2022/core.mjs:5807:39)
  at getOrCreateInjectable (node_modules/@angular/core/fesm2022/core.mjs:5855:12)
  at ɵɵdirectiveInject (node_modules/@angular/core/fesm2022/core.mjs:11933:19)
  at NodeInjectorFactory.SidebarComponent_Factory [as factory] (ng:\SidebarComponent\ɵfac.js:5:60)
  at getNodeInjectable (node_modules/@angular/core/fesm2022/core.mjs:6067:44)
  at instantiateAllDirectives (node_modules/@angular/core/fesm2022/core.mjs:12803:27)
  at createDirectivesInstances (node_modules/@angular/core/fesm2022/core.mjs:12199:5)
  at ɵɵelementStart (node_modules/@angular/core/fesm2022/core.mjs:24360:9)
  at ɵɵelement (node_modules/@angular/core/fesm2022/core.mjs:24418:5)
  at PagesComponent_Template (ng:/PagesComponent.js:11:9)
  at executeTemplate (node_modules/@angular/core/fesm2022/core.mjs:12159:9)
  at renderView (node_modules/@angular/core/fesm2022/core.mjs:13366:13)
  at renderComponent (node_modules/@angular/core/fesm2022/core.mjs:13312:5)
  at renderChildComponents (node_modules/@angular/core/fesm2022/core.mjs:13414:9)
  at renderView (node_modules/@angular/core/fesm2022/core.mjs:13394:13)
  at ComponentFactory.create (node_modules/@angular/core/fesm2022/core.mjs:16768:17)
  at initComponent (node_modules/@angular/core/fesm2022/testing.mjs:2039:51)
  at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:416:32)
  at Object.onInvoke (node_modules/@angular/core/fesm2022/core.mjs:7251:33)
  at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:415:38)
  at ZoneImpl.run (node_modules/zone.js/bundles/zone.umd.js:147:47)
  at NgZone.run (node_modules/@angular/core/fesm2022/core.mjs:7097:28)
  at _TestBedImpl.createComponent (node_modules/@angular/core/fesm2022/testing.mjs:2051:41)
  at Function.createComponent (node_modules/@angular/core/fesm2022/testing.mjs:1842:37)
  at src/app/pages/pages.component.spec.ts:22:23

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

auth: {
      clientId: environment.msalConfig.auth.clientId,
      authority: environment.msalConfig.auth.authority,
      redirectUri: environment.msalConfig.auth.redirectUri,
      postLogoutRedirectUri: '/' + RoutePaths.LOGOUT,
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: false,
    },
    system: {
      allowNativeBroker: false, // Disables WAM Broker
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Error,
        piiLoggingEnabled: false,
      },
    },

Relevant Code Snippets

-

Reproduction Steps

Install the latest version in your Angular sample:

https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular18-standalone-sample

Expected Behavior

Jest tests running smoothly as before the migration

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

@azure/msal-browser 3.26.1