Angular 12升级至13后npm启动报错：Class extends value undefined

我将Angular项目从12版本升级到13版本，已严格遵循Angular官方升级指南操作。项目依赖配置如下：

{
  "name": "ngx-admin",
  "version": "2.3.0",
  "license": "MIT",
  "type": "module",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/akveo/ngx-admin.git"
  },
  "bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues"
  },
  "browserslist": ["> 1%", "last 2 versions", "IE 11"],
  "resolutions": {"webpack": "^5.0.0"},
  "scripts": {
    "build.prod": "ng build --configuration production && tar -zcvf archive.tar.gz dist/prod/*",
    "optimizecss": "gulp --gulpfile optimize-css.gulpfile.cjs",
    "postbuild": "gulp compress",
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve --port 5104",
    "build": "ng build",
    "build:prod": "npm run build -- --configuration production --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
    "extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/ --clean --sort --format namespaced-json"
  },
  "dependencies": {
    "@angular/animations": "^13.3.11",
    "@angular/cdk": "~13.3.9",
    "@angular/common": "^13.3.11",
    "@angular/compiler": "^13.3.11",
    "@angular/core": "^13.3.11",
    "@angular/forms": "^13.3.11",
    "@angular/localize": "~13.0.0",
    "@angular/material": "~13.3.9",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "^13.3.11",
    "@angular/service-worker": "~13.0.0",
    "@aspnet/signalr": "^3.0.0-preview6.19307.2",
    "@asymmetrik/ngx-leaflet": "8.1.0",
    "@circlon/angular-tree-component": "^11.0.4",
    "@formio/angular": "^5.3.0",
    "@fullcalendar/angular": "^5.1.0",
    "@fullcalendar/core": "^5.1.0",
    "@fullcalendar/daygrid": "^5.1.0",
    "@fullcalendar/interaction": "^5.1.0",
    "@fullcalendar/list": "^5.1.0",
    "@fullcalendar/timegrid": "^5.1.0",
    "@iplab/ngx-color-picker": "^2.1.1",
    "@microsoft/signalr": "^5.0.5",
    "@nebular/eva-icons": "^7.0.0",
    "@nebular/theme": "^7.0.5",
    "@ng-bootstrap/ng-bootstrap": "10.0.0",
    "@ngrx/effects": "^11.1.0",
    "@ngrx/store": "^11.1.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@swimlane/ngx-charts": "^17.0.1",
    "@types/codemirror": "0.0.108",
    "ag-grid": "^18.1.2",
    "angular-gauge": "^4.0.0",
    "angular-gauge-chart": "^0.7.2",
    "angular-google-charts": "^2.2.1",
    "angular-gridster2": "^11.1.5",
    "angular-responsive-carousel": "^2.1.2",
    "angular2-toaster": "^11.0.1",
    "bootstrap": "^5.1.3",
    "chart.js": "^3.9.1",
    "chartjs-plugin-datalabels": "^1.0.0",
    "chartjs-plugin-zoom": "^1.2.1",
    "codemirror": "^5.60.0",
    "core-js": "3.10.1",
    "eva-icons": "^1.1.3",
    "flag-icon-css": "^3.5.0",
    "font-awesome": "^4.7.0",
    "fontawesome-4.7": "^4.7.0",
    "formiojs": "^4.14.8",
    "gulp-brotli": "^3.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-filter": "^7.0.0",
    "gulp-gzip": "^1.4.2",
    "gulp-purify-css": "^0.1.0",
    "gulp-rename": "^2.0.0",
    "html-webpack-plugin": "^5.5.0",
    "intro.js": "^6.0.0",
    "jalali-moment": "^3.3.10",
    "jquery": "^3.6.0",
    "jqwidgets-ng": "^12.0.4",
    "leaflet": "1.7.1",
    "linq": "^3.2.3",
    "lodash": "^4.17.21",
    "madge": "^5.0.1",
    "moment-duration-format": "^2.3.2",
    "ng-multiselect-dropdown": "^0.3.4",
    "ng-zorro-antd": "^11.4.2",
    "ng2-dnd": "^5.0.2",
    "ng2-jalali-date-picker": "^2.4.2",
    "ng2-tooltip-directive": "~2.9.22",
    "ngx-bootstrap": "^6.2.0",
    "ngx-color": "~7.2.0",
    "ngx-color-picker": "^11.0.0",
    "ngx-filesize": "^2.0.16",
    "ngx-infinite-scroll": "^6.9.1",
    "ngx-loading": "^8.0.0",
    "ngx-permissions": "^8.1.1",
    "ngx-persian": "^1.3.2",
    "ngx-sortablejs": "^11.1.0",
    "ngx-spinner": "^11.0.2",
    "ngx-toastr": "^13.2.1",
    "ngx-ui-switch": "^11.0.1",
    "node-sass": "^4.14.1",
    "npm": "^7.9.0",
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primeng": "^13.4.1",
    "quill": "^1.3.7",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "sass": "^1.53.0",
    "sortablejs": "^1.13.0",
    "sweetalert2": "^10.16.2",
    "swiper": "^6.8.4",
    "tslib": "^2.2.0",
    "webpack": "^4.44.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.9",
    "@angular/cli": "~13.3.9",
    "@angular/compiler-cli": "~13.0.0",
    "@biesbjerg/ngx-translate-extract": "^7.0.4",
    "@compodoc/compodoc": "^1.1.19",
    "@types/intro.js": "^5.1.0",
    "@types/lodash": "^4.14.184",
    "@types/node": "^14.14.39",
    "autoprefixer": "^10.4.7",
    "conventional-changelog-cli": "2.1.1",
    "gulp": "^4.0.2",
    "gulp-util": "^3.0.8",
    "gulp-zip": "^5.1.0",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "postcss": "^8.4.14",
    "protractor": "~7.0.0",
    "rimraf": "3.0.2",
    "stylelint": "13.12.0",
    "ts-node": "9.1.1",
    "tslint": "~6.1.0",
    "typescript": "~4.6.4"
  },
  "description": "https://ng-bootstrap.github.io/#/components/datepicker/calendars\n https://stackoverflow.com/questions/34712171/how-to-add-providers-to-injector-dynamically-in-angular-2",
  "homepage": "https://github.com/akveo/ngx-admin#readme",
  "main": "gulpfile.js",
  "author": ""
}

执行npm start启动项目时，出现如下错误：

An unhandled exception occurred: Class extends value undefined is not a constructor or null

我已搜索同类错误的解决方案但均不适用，且已检查所有组件确认正常运行，请求协助解决。

排查与解决方案 #

1. 修复依赖版本兼容性问题 #

你的项目中大量第三方库版本与Angular 13不匹配，这是核心诱因：

• 将@ngrx/store、@ngrx/effects升级到13.x版本（与Angular主版本保持一致）
• 升级@circlon/angular-tree-component、angular-gridster2到支持Angular 13的版本
• 将ng-zorro-antd升级到13.x版本，确保UI库与Angular版本兼容
• 移除dependencies中的webpack依赖，Angular 13默认使用Webpack 5，你的resolutions已指定webpack: ^5.0.0，重复安装会导致版本冲突

2. 彻底清理缓存并重装依赖 #

执行以下命令消除缓存和依赖残留问题：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

3. 定位具体报错文件 #

添加--verbose参数启动项目，获取完整报错栈，定位具体触发错误的文件和代码行：

ng serve --port 5104 --verbose

重点检查所有extends语句，确认继承的类是否存在、导入路径是否正确，第三方库升级后可能存在API变更。

4. 临时移除ES模块配置 #

你的package.json中设置了"type": "module"，Angular 13对ES模块的处理逻辑与12不同，尝试临时删除该配置后重新启动项目，验证是否解决问题。

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