使用@azure/msal-angular实现微软AD认证时遇performanceMeasurement.startMeasurement错误

问题场景 #

在基于Angular 14的应用中，按照微软官方教程实现Azure AD认证，调用MsalService的loginPopUp()或loginRedirect()方法时触发以下错误：

TypeError: performanceMeasurement.startMeasurement is not a function

错误栈信息：

core.mjs:9171 ERROR TypeError: performanceMeasurement.startMeasurement is not a function
    at PerformanceClient.startMeasurement (PerformanceClient.js:76:32)
    at BrowserPerformanceClient.startMeasurement (BrowserPerformanceClient.js:43:65)
    at ClientApplication.acquireTokenPopup (ClientApplication.js:274:57)
    at PublicClientApplication.loginPopup (PublicClientApplication.js:78:21)
    at MsalService.loginPopup (azure-msal-angular.js:55:35)
    at AppComponent.login (app.component.ts:25:23)
    at AppComponent_button_16_Template_button_click_0_listener (app.component.html:33:24)
    at executeListenerWithErrorHandling (core.mjs:15679:16)
    at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15714:22)
    at HTMLButtonElement.<anonymous> (platform-browser.mjs:459:38)

使用的依赖版本：

• @azure/msal-angular: ^2.5.2
• @azure/msal-browser: ^2.32.2
• @angular-devkit/build-angular: 14.2.10
• @angular/cli: 14.2.10

尝试过类似msal-react的降级方案但未找到有效版本组合。

解决方案 #

1. 匹配msal-angular与msal-browser的兼容版本 #

msal-angular 2.x系列对msal-browser版本有严格依赖要求，@azure/msal-angular@2.5.2对应的正确@azure/msal-browser版本为2.31.0，执行以下命令锁定版本：

npm install @azure/msal-browser@2.31.0 --save-exact

2. 显式禁用性能测量功能 #

如果版本调整后问题仍存在，可以在MSAL初始化配置中关闭性能测量模块：
在app.module.ts的MSAL配置对象中添加system.loggerOptions.performanceClient并设为null：

import { LogLevel } from '@azure/msal-browser';

export const msalConfig = {
  auth: {
    clientId: '你的客户端ID',
    authority: '你的认证授权地址',
    redirectUri: '你的重定向地址'
  },
  cache: {
    cacheLocation: 'localStorage'
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) return;
        switch (level) {
          case LogLevel.Error: console.error(message); break;
          case LogLevel.Warning: console.warn(message); break;
          case LogLevel.Info: console.info(message); break;
          case LogLevel.Verbose: console.debug(message); break;
        }
      },
      piiLoggingEnabled: false,
      performanceClient: null // 禁用性能测量
    }
  }
};

3. 调整Angular构建配置避免依赖优化问题 #

在angular.json的项目构建配置中，将msal相关包加入allowedCommonJsDependencies，防止Angular构建时对其进行不兼容的优化：

"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          "allowedCommonJsDependencies": [
            "@azure/msal-browser",
            "@azure/msal-angular"
          ],
          // 其他构建配置...
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者PabloK