Angular出现TypeError: Cannot redefine property: ɵfac报错如何修复

core.js:27478 Uncaught TypeError: Cannot redefine property: ɵfac
    at Function.defineProperty (<anonymous>)
    at addDirectiveFactoryDef (core.js:27478:1)
    at compileComponent (core.js:27361:1)
    at ɵ3$1 (core.js:27674:93)
    at TypeDecorator (core.js:3758:1)
    at __decorate (tslib.es6.js:58:53)
    at Module.ENgC (collection-list-section-form.component.ts:46:48)
    at __webpack_require__ (bootstrap:84:1)
    at Module.GCp2 (sub-action-file-upload.component.ts:9:42)
    at __webpack_require__ (bootstrap:84:1)

Angular项目启动/编译阶段抛出上述错误，项目package.json配置如下：

{
  "name": "frontend-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "build-production": "ng build --prod --configuration production",
    "build-staging": "ng build --prod --configuration staging",
    "build-develop": "ng build --prod --configuration develop",
    "test": "ng test --code-coverage",
    "lint": "ng lint --ts-config tsconfig.json --tslint-config tslint.json",
    "e2e": "ng e2e",
    "sonar": "sonar-scanner"
  },
  "private": true,
  "dependencies": {
    "@angular-material-components/datetime-picker": "^6.0.2",
    "@angular-material-components/moment-adapter": "^6.0.0",
    "@angular/animations": "~11.2.4",
    "@angular/cdk": "~11.2.3",
    "@angular/common": "~11.2.4",
    "@angular/core": "~11.2.4",
    "@angular/forms": "~11.2.4",
    "@angular/localize": "^11.2.4",
    "@angular/material": "^11.2.3",
    "@angular/platform-browser": "~11.2.4",
    "@angular/platform-browser-dynamic": "~11.2.4",
    "@angular/router": "~11.2.4",
    "@material-extended/mde": "^3.0.3",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@ngxs/storage-plugin": "^3.7.1",
    "@ngxs/store": "^3.7.1",
    "@swimlane/ngx-datatable": "^19.0.0",
    "angular-google-tag-manager": "1.4.2",
    "angularx-social-login": "^3.5.7",
    "bootstrap": "^4.4.1",
    "hammerjs": "^2.0.8",
    "i": "^0.3.6",
    "ngx-bootstrap": "^5.3.2",
    "ngx-captcha": "^10.0.0",
    "ngx-color-picker": "^8.2.0",
    "ngx-csv-parser": "0.0.7",
    "ngx-google-places-autocomplete": "^2.0.5",
    "ngx-infinite-scroll": "^8.0.0",
    "ngx-quill": "13.2.0",
    "ngx-youtube-player": "^12.0.1",
    "ngxs-reset-plugin": "^1.3.1",
    "quill": "^1.3.6",
    "rxjs": "~6.6.6",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.3",
    "@angular/cli": "~11.2.3",
    "@angular/compiler": "^11.2.4",
    "@angular/compiler-cli": "^11.2.0",
    "@angular/language-service": "~11.2.4",
    "@ngxs/devtools-plugin": "^3.7.1",
    "@schematics/angular": "^12.2.9",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^14.14.31",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~6.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage": "^2.0.3",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "sonar-scanner": "^3.1.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.3",
    "typescript": "~4.0.7"
  }
}

这个错误是Angular编译阶段尝试重复定义组件/指令的内部工厂属性ɵfac导致的，结合配置看常见诱因有三个：

• 依赖版本跨大版本不兼容：项目核心Angular版本为11.2.x，但devDependencies中引入了Angular 12版本的@schematics/angular@^12.2.9，dependencies中的ngx-quill@13.2.0也是适配Angular 12+的版本，跨版本的Angular生态包会导致编译时元数据生成逻辑冲突，重复写入ɵfac定义。
• 本地依赖/编译缓存损坏：node_modules或webpack热更新缓存残留了多版本编译产物，触发重复注册。
• 组件声明异常：报错栈指向collection-list-section-form.component.ts第46行，该组件可能存在多模块重复声明、同一类重复添加装饰器、循环依赖等问题。

按以下顺序排查处理：

1. 修正不兼容依赖版本
   • 将@schematics/angular版本调整为和@angular/cli一致的11.2.x版本
   • 将ngx-quill降级到适配Angular 11的12.x版本
   • 所有Angular生态相关依赖统一锁到11.2大版本，避免npm自动安装跨大版本的不兼容包
2. 全量清理缓存重装依赖
   执行以下命令：

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

3. 检查异常组件
   打开collection-list-section-form.component.ts第46行附近，确认：
   • 该组件仅在一个NgModule的declarations数组中声明，没有重复出现在多个模块的声明列表里
   • 没有对同一个组件类重复使用@Component/@Directive装饰器
   • 组件和其引入的服务、模块不存在循环导入问题
4. 如果是开发环境热更新偶发报错，直接重启ng serve进程、清空浏览器缓存后重试即可。

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