使用Angular的全局加载器加载MSAL模块。

在app.component.ts文件中导入LoaderService和MsalService：

import { Component } from '@angular/core';
import { LoaderService } from './services/loader.service';
import { MsalService } from './services/msal.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private loaderService: LoaderService, private msalService: MsalService) {
    this.loaderService.show(); // 显示全局加载器
    this.msalService.init(); // 初始化MSAL服务
  }
}

在loader.service.ts文件中创建全局加载器：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  status: Subject = new Subject();

  constructor() { }

  // 显示全局加载器
  show() {
    this.status.next(true);
  }

  // 隐藏全局加载器
  hide() {
    this.status.next(false);
  }
}

在msal.service.ts文件中调用全局加载器：

import { Injectable } from '@angular/core';
import * as Msal from 'msal';
import { LoaderService } from './loader.service';

@Injectable({
  providedIn: 'root'
})
export class MsalService {
  private applicationConfig: any = {
    clientID: 'client_id',
    authority: 'https://login.microsoftonline.com/tenant_id',
    validateAuthority: true,
    redirectUri: 'http://localhost:4200/',
    cacheLocation: 'localStorage',
    postLogoutRedirectUri: 'http://localhost:4200/'
  };
  private app: Msal.UserAgentApplication;

  constructor(private loaderService: LoaderService) {
    this.app = new Msal.UserAgentApplication(
      this.applicationConfig.clientID,
      this.applicationConfig.authority,
      () => {
        // callback for login
      },
      {
        cacheLocation: this.applicationConfig.cacheLocation,
        redirectUri: this.applicationConfig.redirectUri
      }
    );
  }

  // 初始化MSAL服务并隐藏