Angular 13迁移至15后MatMenu报错：无法调用Boolean构造函数

将Angular应用从13版本迁移到15版本后，原本正常运行的MatMenu组件出现异常。即使直接使用Angular Material官网提供的默认示例代码，点击菜单按钮时控制台仍会抛出TypeError错误。

示例代码 #

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

控制台错误信息 #

core.mjs:8453 ERROR TypeError: Class constructor Boolean cannot be invoked without 'new'
    at NgClass.ngDoCheck (vendor.js:62561:34)
    at callHook (vendor.js:72247:12)
    at callHooks (vendor.js:72212:9)
    at executeInitAndCheckHooks (vendor.js:72169:5)
    at refreshView (vendor.js:79857:11)
    at refreshEmbeddedViews (vendor.js:80812:9)
    at refreshView (vendor.js:79866:5)
    at refreshComponent (vendor.js:80857:7)
    at refreshChildComponents (vendor.js:79641:5)
    at refreshView (vendor.js:79893:7)

解决方案 #

• 同步Angular Material与核心包版本：确保@angular/material、@angular/cdk的版本与@angular/core、@angular/common等核心框架版本完全一致（均为15.x.x）。可通过npm list @angular/material查看当前版本，若不一致，执行命令更新：

  npm install @angular/material@15 @angular/cdk@15 --save
  

• 调整TypeScript编译目标：打开项目根目录的tsconfig.json文件，将compilerOptions.target设置为ES2016或更高版本（如ES2020），同时确保lib数组包含对应ES版本及DOM库，示例配置：

  {
    "compilerOptions": {
      "target": "ES2020",
      "lib": ["ES2020", "DOM"],
      // 其他配置项...
    }
  }
  

• 清理缓存并重建项目：执行npm ci清除旧依赖缓存并重新安装，随后运行ng build重新构建项目，避免缓存导致的版本冲突问题。

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