Q:

Angular Application stuck in an endless loop

I have an Angular web application that is using @microsoft/microsoft-graph-client to get the logged in user's information.  @azure/msal-angular is used to sign-in the user.  I have an auth service that logs the user in with this:
  async signIn(): Promise<void> {
    const result = await this.msalService.loginPopup(OAuthSettings.consentScopes)
      .catch((reason) => {
        this.alertsService.add('Login failed', JSON.stringify(reason, null, 2));
      });

    if (result) {
      this.authenticated = true;
      await this.getUser();
    }
  }
  private async getClient(): Promise<Client> {
    const graphClient = Client.init({
      // Initialize the Graph client with an auth
      // provider that requests the token from the
      // auth service
      authProvider: async (done) => {
        const token = await this.getAccessToken()
          .catch((reason) => {
            done(reason, null);
          });
        if (token) {
          done(null, token);
        } else {
          done('Could not get an access token', null);
        }
      }
    });
    return graphClient;
  }

private async getUser() {
    if (!this.authenticated) {
      return null;
    }
    const graphClient = await this.getClient();

    // Get the user from Graph (GET /me)
    const graphUser = await graphClient.api('/me').get();

    console.log('USERNAME: ', graphUser.displayName);
    sessionStorage.setItem('d365dataportal.user', graphUser);
    if (graphUser.mail != null) {
      sessionStorage.setItem('d365dataportal.user.email', graphUser.mail);
    } else {
      sessionStorage.setItem('d365dataportal.user.email', graphUser.userPrincipalName);
    }
    sessionStorage.setItem('d365dataportal.user.avatar', graphUser.avatar);
    sessionStorage.setItem('d365dataportal.user.name', graphUser.displayName);
  }

My OAuthSettings look like this:
export const OAuthSettings = {
  appId: 'App GUID from Azure Here',
  redirectUri: 'http://localhost:4200',
  consentScopes: ['user.read',
    'Directory.Read.All',
    'Directory.ReadWrite.All',
    'Directory.AccessAsUser.All']
};

The problem I am running into is that when this.msalService.loginPopup() is called, the entire application hangs, the popup window never shuts, and never seems to authenticate and redirect back to my page.  I am not sure why this is happening.  Can anyone see any glaring errors?
EDIT
I am leaving the content above because it was my original question.  I realized that the issue had nothing to do with my original title and changed the name of the question.

A:

I solved my problem, and it had nothing to do with using Azure AD or Graph API.  In my component html, I had an *ngIf that was looking for the result of a function.  It looked like this:
<a mat-list-item *ngIf="authService.functionThatReturnsBoolean()" [routerLink]="['/SomeRoute']" routerLinkActive="router-link-active">Link Name</a>

Instead, I changed my service to populate the results in a property in the service and pointed the *ngIf at that property like this:
<a mat-list-item *ngIf="authService.booleanProperty" [routerLink]="['/SomeRoute']" routerLinkActive="router-link-active">Link Name</a>

The problem had to do with the way Angular continues to look for the status in the *ngIf.  It was then stuck in what appeared to be an endless loop until Chrome crashed.

