Add official Angular 21 support

[SwabianCoder]

Core Library

MSAL.js (@azure/msal-browser)

Wrapper Library

MSAL Angular (@azure/msal-angular)

Public or Confidential Client?

Public

Description

Core Library

MSAL.js (@azure/msal-browser)

Wrapper Library

MSAL Angular (@azure/msal-angular)

Public or Confidential Client?

Public

Description

Please add Angular 21 as officially supported version.

[smg-bg]

Is there any ETA for this. Past versions were quite late, I wonder if this time there will be a resource to be assigned on this.

Besides that, I wonder if anyone has tried it with the current version - are there any issues running as is?

[aylmercarson]

i am running it with ng 21. so far, no issues, but i will be happier when i know that under the hood, it is using uptodate ng technology...

"@angular/animations": "^21.0.1",
"@angular/common": "^21.0.1",
"@angular/compiler": "^21.0.1",
"@angular/core": "^21.0.1",
"@angular/forms": "^21.0.1",
"@angular/platform-browser": "^21.0.1",
"@angular/router": "^21.0.1",
"@azure/msal-angular": "^4.0.22",
"@azure/msal-browser": "^4.26.2",
"@azure/msal-common": "^15.13.0",
"@ngrx/operators": "^20.0.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0"

[tkanka12]

May I kindly ask for ETA on adding support for Angular v21?
I am in the middle of upgrading my project dependencies and @azure/msal-angular's missing support for v21 would be a blocker I suppose?
Or does the Angular v21 work just fine with @azure/msal-angular v5.0.2?

[prrami]

@aylmercarson , I am using v4 with Angular 21. Login works fine but even after using LocalStorage for cacheLocation, user needs to login again if all browser tabs were closed and browser re launched. Could you please share a working sample you have. Below is my app.config.ts code.

import {
  ApplicationConfig,
  provideBrowserGlobalErrorListeners,
  provideZoneChangeDetection,
  importProvidersFrom,
  APP_INITIALIZER,
} from '@angular/core';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { providePrimeNG } from 'primeng/config';
import { routes } from './app.routes';
import Aura from '@primeuix/themes/aura';
import {
  MsalModule,
  MsalService,
  MsalInterceptor,
  MsalInterceptorConfiguration,
  MSAL_INTERCEPTOR_CONFIG,
} from '@azure/msal-angular';
import {
  PublicClientApplication,
  InteractionType,
  BrowserCacheLocation,
} from '@azure/msal-browser';
import { environment } from '../environments/environment';

const isIE =
  window.navigator.userAgent.indexOf('MSIE ') > -1 ||
  window.navigator.userAgent.indexOf('Trident/') > -1;

/* 🔹 MSAL instance */
export function msalInstanceFactory() {
  return new PublicClientApplication({
    auth: {
      clientId: environment.CLIENT_ID,
      authority: environment.AUTHORITY,
      redirectUri: environment.REDIRECT_URI,
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE,
    },
  });
}

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(environment.API_URL, [`${environment.CLIENT_ID}/.default`]);
  protectedResourceMap.set(environment.GRAPH_API, ['user.read', 'profile']);

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

export function AppInitializer(msalService: MsalService): () => Promise<void> {
  return () => msalService.instance.initialize();
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'top',
        anchorScrolling: 'enabled',
      }),
    ),
    provideAnimations(),
    providePrimeNG({
      theme: {
        preset: Aura,
      },
    }),
    /* 🔹 HttpClient required by MSAL */
    provideHttpClient(withInterceptorsFromDi()),

    /* 🔹 MSAL providers */
    importProvidersFrom(
      MsalModule.forRoot(
        msalInstanceFactory(),
        {
          interactionType: InteractionType.Popup,
          authRequest: {
            scopes: ['user.read'],
          },
        },
        {
          interactionType: InteractionType.Popup,
          protectedResourceMap: new Map([['https://graph.microsoft.com/v1.0/me', ['user.read']]]),
        },
      ),
    ),
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory,
    },
    MsalService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true,
    },
    {
      provide: APP_INITIALIZER,
      useFactory: AppInitializer,
      deps: [MsalService],
      multi: true,
    },
  ],
};

[Aeseir]

If you are experiencing a dead redirect (i.e. logged in but not taking you anywhere), check if you have a dependancy on msalService.instance.getActiveAccount().username.

For some reason we noticed that even though it was signing user in, username field wasn't populated (as were some of the other ones too).

Basically you have to hack the old version to get it to work with v21.

[jo-arroyo]

Hi all, thank you for your patience. Angular 21 is now officially supported with MSAL Angular v5 and our docs and samples have been updated to reflect this. Please see PR #8318.