can't authenticate user after running ng build --prod

Question

Hello team,

i followed this Microsoft Youtube tutorial integrating MSAL in my angular app. everything works fine on the development environment but once i run ng build --prod the app doesn't authenticate users and doesn't read the auth tokens from the browser cache and i get this error

those are the events i'm listening to

    this.broadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None)
        , takeUntil(this._destroying$)
      )
      .subscribe(() => {
        if (this.msalService.instance.getActiveAccount() && this.msalService.instance.getAllAccounts().length > 0) {
          this.setAuthenticationStatus();
          this.CheckUserRole();
        }
      });


    this.broadcastService.msalSubject$
      .pipe(
        filter(
          (msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS
            || msg.eventType === EventType.SSO_SILENT_SUCCESS)
      ).subscribe((result: EventMessage) => {
        const payload = result.payload as AuthenticationResult;
        this.msalService.instance.setActiveAccount(payload.account);
        this.setAuthenticationStatus();
        this.CheckUserRole();
      });

Answer 1

@Tarek, Taher

Thank you for your post!

Based off the YouTube tutorial that you're following, I found the referenced GitHub repo and when looking at the error message you received, it's difficult to pinpoint the exact problem within your Angular App's code. However, it seems like there might be an issue related to an undefined property being accessed - " Cannot read properties of undefined (reading 'get') at e.getCredentialType (main.c672a74....js:1:1:770009)... ".

When it comes to troubleshooting the undefined properties error:

• Can you see if all of the required dependencies are included in your production build? Sometimes, dependencies that are only used in development mode may not be included in the production build, which can cause issues.
• When following the YouTube tutorial, can you make sure that you followed all the steps mentioned within the video to ensure everything is set up per the tutorial? You can also compare your code to the Msal Angular Demo GitHub Repo to check for any discrepancies.
• Have you received any specific sign-in / authentication error messages, or is your issue more related to the failure with the production build of your Angular App?

---

Since the tutorial recommends reaching out to the Microsoft 365 & Power Platform Community, I've added the Microsoft 365 tag to your thread so their community can look into this issue as well.

I hope this helps!

If you have any other questions, please let me know. Thank you for your time and patience throughout this issue.