Angular项目编译成功但浏览器无响应，报Type无ɵmod属性错误

错误信息 #

Uncaught Error: Type [object Object] does not have 'ɵmod' property.
    at getNgModuleDef (core.js:1132:1)
    at recurse (core.js:25372:1)
    at recurse (core.js:25383:1)
    at recurse (core.js:25383:1)
    at registerNgModuleType (core.js:25368:1)
    at new NgModuleFactory$1 (core.js:25482:1)
    at compileNgModuleFactory__POST_R3__ (core.js:29182:1)
    at PlatformRef.bootstrapModule (core.js:29432:1)
    at 14431 (main.ts:11:26)
    at __webpack_require__ (bootstrap:19:1)
    at __webpack_exec__ (util.inspect:1:1)
    at util.inspect:1:1
    at __webpack_require__.O (chunk loaded:25:1)
    at util.inspect:1:1
    at webpackJsonpCallback (jsonp chunk loading:72:1)
    at main.js:1:75

Package.json配置 #

{
  "name": "ingo-iv-web",
  "version": "1.1.0",
  "license": "PrimeNG Commercial",
  "scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --port=process.env.PORT",
    "build": "webpack",
    "test": "karma start ./karma.conf.js",
    "lint": "ng lint",
    "e2e": "protractor ./protractor.conf.js",
    "prepree2e": "npm start",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.17",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^12.2.17",
    "@angular/compiler": "^12.2.17",
    "@angular/core": "^12.2.17",
    "@angular/forms": "^12.2.17",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^12.2.17",
    "@angular/platform-browser-dynamic": "^12.2.17",
    "@angular/router": "^12.2.17",
    "@fullcalendar/core": "4.2.0",
    "@fullcalendar/daygrid": "4.2.0",
    "@fullcalendar/interaction": "4.2.0",
    "@sentry/browser": "^5.19.1",
    "apexcharts": "^3.35.5",
    "chart.js": "^2.1.3",
    "core-js": "^2.4.1",
    "exceljs": "^1.10.0",
    "file-saver": "^1.3.8",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.1.0",
    "intl": "^1.2.5",
    "jquery": "^3.1.1",
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.5.28",
    "mingcute_icon": "^2.7.1",
    "moment": "^2.17.1",
    "nanoscroller": "0.8.7",
    "ng-apexcharts": "1.6.0",
    "ng-fullcalendar": "^2.0.3",
    "ng-http-loader": "^0.3.3",
    "ngx-csv": "^0.3.2",
    "ngx-papaparse": "^5.1.0",
    "ngx-permissions": "^8.1.1",
    "remixicon": "^2.5.0",
    "rxjs": "6.5.3",
    "rxjs-compat": "^6.5.3",
    "simple-line-icons": "^2.4.1",
    "web-animations-js": "^2.2.2",
    "xlsx": "^0.18.5",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.2.18",
    "@angular/cli": "^12.2.18",
    "@angular/compiler-cli": "^12.2.17",
    "@types/jasmine": "~3.6.0",
    "@types/lodash": "^4.14.191",
    "@types/node": "~6.0.60",
    "autoprefixer": "^6.5.3",
    "codelyzer": "^6.0.0",
    "stylus-loader": "^2.4.0",
    "ts-node": "~2.0.0",
    "tslint": "~6.1.3",
    "typescript": "^4.2.3",
    "url-loader": "^0.5.7",
    "webpack": "^4.39.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

问题场景 #

项目编译成功无报错，编译日志显示：

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
√ Compiled successfully.
✔ Browser application bundle generation complete.
7 unchanged chunks
Build at: 2024-01-11T12:21:58.547Z - Hash: e6b51174fba88ec815a1 - Time: 5794ms
√ Compiled successfully.

但浏览器打开后无响应，控制台出现上述ɵmod属性缺失的错误。

解决方案 #

该错误核心原因是模块定义不完整、依赖版本不兼容或第三方库适配问题，结合配置按以下步骤修复：

1. 统一Angular生态依赖版本 #

项目使用Angular 12，但@angular/cdk（8.2.3）、@angular/http（7.2.15）版本差异过大，导致模块冲突：

• 卸载@angular/http，Angular 12已废弃该包，改用@angular/common/http（已包含在@angular/common中）
• 将@angular/cdk升级到Angular 12兼容版本：

  npm uninstall @angular/cdk
  npm install @angular/cdk@^12.2.17
  

2. 修复Webpack版本兼容性 #

webpack 4.39.2与webpack-cli 5.1.4不兼容（Webpack 4对应webpack-cli 3.x），同时webpack-dev-server 4.x与Webpack 4适配性差，执行以下命令调整：

npm uninstall webpack-cli webpack-dev-server
npm install webpack-cli@^3.3.12 webpack-dev-server@^3.11.3

3. 更新第三方库至兼容版本 #

部分第三方库版本过低，无法适配Angular 12：

• ng-fullcalendar ^2.0.3：仅支持Angular 5-7，替换为@fullcalendar/angular@^4.4.2（与现有@fullcalendar/core 4.2.0兼容）
• ngx-permissions ^8.1.1：升级至支持Angular 12的版本（如^12.0.0）
• ng-http-loader ^{0.3.3：升级至}12.0.0版本

4. 检查模块导入正确性 #

确认所有在NgModule的imports数组中的项都是合法Angular模块（带有ɵmod属性），避免误导入普通对象或非Angular模块，重点排查app.module.ts等核心模块。

5. 清理缓存并重新构建 #

执行以下命令清理缓存、重装依赖后重新构建：

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

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