Standalone app fails to launch outside of local environment

[Core121]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

4.11.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

4.0.10

Public or Confidential Client?

Public

Description

I have a standalone angular application that fails to launch outside of a local environment. Locally it works just fine, but if I deploy it to our dev or prod environments it seems to either not be initialized or create a circular dependency for MsalBroadcastService, which is only used in my wrapper AuthService.

In issue #7691 they suggest using msal-angular version 4.0.7 and msal-browser 4.8.0. If I pin them to these versions the error goes away and everything works again in all environments.

Error Message

MSAL Logs

No logs since it fails to launch

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'redacted',
      authority: 'redacted',
      knownAuthorities: ['redacted'],
      redirectUri: environment.auth_redirect_uri,
      postLogoutRedirectUri: environment.postLogoutRedirectUri,
      navigateToLoginRequestUrl: false,
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      claimsBasedCachingEnabled: true,
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Error,
        piiLoggingEnabled: false,
      },
    },
  });
}

Relevant Code Snippets

// auth.config.ts

export function loggerCallback(logLevel: LogLevel, message: string) {
  console.log(message);
}

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'redacted',
      authority: 'redacted',
      knownAuthorities: ['redacted'],
      redirectUri: environment.auth_redirect_uri,
      postLogoutRedirectUri: environment.postLogoutRedirectUri,
      navigateToLoginRequestUrl: false,
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      claimsBasedCachingEnabled: true,
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Error,
        piiLoggingEnabled: false,
      },
    },
  });
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      authority: 'redacted',
      scopes: ['openid', 'redacted'],
    },
    loginFailedRoute: 'login',
  };
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(environment.api_url + '*', ['redacted']);

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

// AuthService (wrapper for msalService)

constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private msalService: MsalService,
    private msalBroadcastService: MsalBroadcastService
  ) {
    super();
  }

  initialize(): void {
    this.msalService.handleRedirectObservable().subscribe();
    this.msalService.instance.enableAccountStorageEvents();
  }


// app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [HeaderComponent, RouterOutlet, AsyncPipe, CardModule, Toast, ProgressSpinner, ConfirmDialogModule, MsalModule],
})
export class AppComponent implements OnInit {
  isIframe = false;
  env = environment;
  loading$: Observable<boolean>;

  constructor(
    private authService: AuthService
  ) {
    const storedTheme = this.themeService.getTheme();
    this.themeService.setTheme(storedTheme);
    this.loading$ = this.spinnerService.loading$;
  }

  ngOnInit() {
    this.authService.initialize();
    this.isIframe = window !== window.parent && !window.opener;
  }

// app.config.ts (applied in main.ts when bootstrapping AppComponent)

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(APP_ROUTES),
    importProvidersFrom(BrowserModule),
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory,
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true,
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService,
    UserService,
    MessageService,
    DialogService,
    ConfirmationService,
    CustomerService,
    CustomerObjectService,
    UserObjectService,
    provideHttpClient(withInterceptorsFromDi(), withFetch()),
    provideAnimations(),
    providePrimeNG({
      theme: {
        preset: Noir,
        options: {
          darkModeSelector: '.dark',
        },
      },
      ripple: true,
    }),
  ],
};

Reproduction Steps

1. Create standalone angular app
2. Build application and host anywhere outside of local environment

Expected Behavior

Should work in all environments

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Chrome

Regression

msal-angular version 4.0.7 and msal-browser 4.8.0

[Core121]

Turning on aot in the angular.json seems to fix this. Seems to be a configuration issue, please disregard.