angular-standalone-sample with v5: login using popup is broken

[meriturva]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

5.4.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

5.1.1

Public or Confidential Client?

Public

Description

Angular standalone sample with msal v5 doesn't work.

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

Just configuration from sample on path: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-standalone-sample

Relevant Code Snippets

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

Reproduction Steps

Update package.json with the latest versions:

    "@azure/msal-angular": "5.1.1",
    "@azure/msal-browser": "5.4.0",

Now you have a few compilation errors that are not well-documented. See related issue: #8332

Just comment out error codes in app.component.ts:

// this.authService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window
    // this.msalBroadcastService.msalSubject$
    //   .pipe(
    //     filter(
    //       (msg: EventMessage) =>
    //         msg.eventType === EventType.ACCOUNT_ADDED ||
    //         msg.eventType === EventType.ACCOUNT_REMOVED
    //     )
    //   )
    //   .subscribe((result: EventMessage) => {
    //     if (this.authService.instance.getAllAccounts().length === 0) {
    //       window.location.pathname = '/';
    //     } else {
    //       this.setLoginDisplay();
    //     }
    //   });

Run sample with ng serve and you have the sample running on http://localhost:4200.

Just run "login with popup" and you will see popup not correctly handled and it remains open.

Expected Behavior

The sample has to work correctly with v5

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

[KirillTregubov]

Same behaviour on React v19 with React Router v7 in Data Mode. Forced to downgrade to v4 for now.

[jo-arroyo]

@meriturva @KirillTregubov Have you followed all the steps in our migration guide, specifically regarding setting up a redirect bridge? Including updating the app redirect uri in Entra.

[meriturva]

The point isn't whether or not to perform the migration steps, but rather to have a ready-made example using the latest published version.
The goal is to provide a seamless development experience, specifically tailored for beginners.
My two cents.

[tnorling]

I believe the dev branch was still running v4 at the time this issue was opened. v5 has since been fully pushed to dev and all the samples are now running v5, I'm going to consider this closed but if you still have issues please feel free to open a new issue