Angular 15升级至16后执行ng serve抛出Class extends value undefined错误

错误信息 #

执行ng serve时抛出异常：

An unhandled exception occurred: Class extends value undefined is not a constructor or null
See "C:\Users\rxq486\AppData\Local\Temp\ng-3pEwUo\angular-errors.log" for further details.

环境信息 #

Angular CLI: 16.2.9
Node: 18.12.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 16.2.12

已尝试操作 #

• 降级@angular-devkit至15版本，错误仍存在

核心问题分析 #

该错误本质是第三方依赖与Angular 16版本不兼容，导致代码中继承的类未正确加载或不存在。结合你的package.json，重点排查以下冲突依赖：

"dependencies": {
    // ...
    "@ng-idle/core": "^13.0.1", // Angular 13版本，无Angular 16兼容支持
    "ng2-toasty": "^4.0.3",     // 停止维护的老旧库，不兼容Angular 16
    "mydatepicker": "^9.0.2",   // 无Angular 16适配版本
    "ng2-right-click-menu": "0.0.16", // 老旧库，无现代Angular支持
    "ngx-color-picker": "^15.0.0", // 需升级到Angular 16兼容版
    "rxjs-compat": "^6.6.7",    // Angular 16依赖rxjs@7，该包为rxjs@6兼容层，建议移除
    // ...
},
"devDependencies": {
    // ...
    "@angular-devkit/build-optimizer": "^0.1001.4", // Angular 10版本包，与Angular 16冲突
    "webpack": "^4.44.1",       // 与resolutions中指定的webpack@5冲突
    "typescript": "^4.8.4",     // Angular 16要求TypeScript >=4.9.0
    // ...
},
"resolutions": {
    "webpack": "^5.0.0"         // 手动强制webpack版本，与Angular CLI自动管理冲突
}

解决步骤 #

1. 更新/替换不兼容依赖 #

• 将@ng-idle/core升级到^16.0.0（Angular 16兼容版）
• 移除ng2-toasty、mydatepicker、ng2-right-click-menu，替换为Angular 16支持的组件库：
  • 用ngx-toastr替代ng2-toasty
  • 用@angular/material/datepicker或ngx-bootstrap/datepicker替代mydatepicker
  • 用ngx-contextmenu替代ng2-right-click-menu
• 将ngx-color-picker升级到^16.0.0
• 移除rxjs-compat，并将代码中rxjs@6语法迁移到rxjs@7

2. 清理冲突的开发依赖 #

• 删除@angular-devkit/build-optimizer（Angular 16已不再需要该包）
• 删除devDependencies中的webpack依赖（Angular CLI会自动管理webpack版本）
• 删除resolutions字段（避免手动强制版本导致冲突）

3. 升级TypeScript版本 #

Angular 16要求TypeScript版本为~4.9.0 || ~5.0.0 || ~5.1.0，执行命令升级：

npm install typescript@^4.9.5 --save-dev

4. 清理并重装依赖 #

rm -rf node_modules package-lock.json # Windows系统用rmdir /s node_modules && del package-lock.json
npm install

5. 定位具体错误组件 #

打开错误提示中的日志文件C:\Users\rxq486\AppData\Local\Temp\ng-3pEwUo\angular-errors.log，查看错误栈信息，可直接定位到引发问题的具体组件或库，针对性修复。

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