Angular 8项目执行ng serve时出现ɵɵFactoryDeclaration导出错误

问题背景 #

运行指定兼容Angular 8的遗留项目时，执行ng serve抛出大量node_modules相关错误，核心提示为@angular/core/core中不存在导出成员ɵɵFactoryDeclaration，推测是依赖版本不匹配导致，但无法定位具体依赖。

项目配置信息 #

package.json内容

{"name": "greenhouse-designer-app",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.11",
    "@angular/cdk": "^8.1.3",
    "@angular/common": "^8.2.11",
    "@angular/compiler": "^8.2.11",
    "@angular/core": "^8.2.11",
    "@angular/forms": "^8.2.11",
    "@angular/material": "^8.1.3",
    "@angular/platform-browser": "^8.2.11",
    "@angular/platform-browser-dynamic": "^8.2.11",
    "@angular/router": "^8.2.11",
    "@ctrl/ngx-codemirror": "^2.2.0",
    "@ngxs/store": "^3.5.1",
    "@types/fabric": "^3.4.0",
    "@types/npm": "^2.0.31",
    "angular-split": "^4.0.0",
    "codemirror": "^5.49.2",
    "fabric": "^3.4.0",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.8",
    "ng-multiselect-dropdown": "^0.2.6",
    "ng2-dragula": "^2.1.1",
    "ngx-toastr": "^11.1.2",
    "primeicons": "^2.0.0",
    "primeng": "^8.1.1",
    "rxjs": "^6.5.3",
    "ts-md5": "^1.2.7",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.12",
    "@angular/cli": "^8.3.12",
    "@angular/compiler-cli": "^8.2.11",
    "@angular/language-service": "^8.2.11",
    "@types/jasmine": "^3.4.0",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^10.5.2",
    "@babel/compat-data": "7.8.0",
    "codelyzer": "^5.0.1",
    "jasmine-core": "^3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.3.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "node-sass": "^4.12.0",
    "protractor": "^5.4.2",
    "rxjs-tslint": "^0.1.7",
    "ts-node": "^6.2.0",
    "tslint": "^5.19.0",
    "typescript": "3.5.3"
  }
}

当前Angular环境信息

Angular CLI: 8.3.29
Node: 14.21.3
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.29
@angular-devkit/build-angular     0.803.29
@angular-devkit/build-optimizer   0.803.29
@angular-devkit/build-webpack     0.803.29
@angular-devkit/core              8.3.29
@angular-devkit/schematics        8.3.29
@angular/cdk                      8.2.3
@angular/cli                      8.3.29
@angular/material                 8.2.3
@ngtools/webpack                  8.3.29
@schematics/angular               8.3.29
@schematics/update                0.803.29
rxjs                              6.6.7
typescript                        3.5.3
webpack                           4.39.2

修复步骤 #

1. 锁定Angular核心依赖版本一致性 #

从环境信息可见，@angular/core实际安装版本为8.2.14（package.json中^8.2.11会自动升级小版本），同时@angular/cdk、@angular/material的实际版本与package.json声明版本不一致，版本不匹配会触发内部API冲突：

• 修改package.json中所有Angular核心依赖，去掉版本号前的^，强制锁定为8.2.11；
• 将@angular/cdk、@angular/material版本统一为8.2.11（Angular 8对应CDK/Material的兼容版本需保持一致）。

2. 降级不兼容的第三方依赖 #

部分第三方库版本过高，不支持Angular 8：

• ngx-toastr@11.1.2：最低支持Angular 9，降级为ngx-toastr@8.10.2；
• angular-split@4.0.0：适配Angular 9+，降级为angular-split@3.0.3；
• @ngxs/store@3.5.1：部分版本开始适配Angular 9，锁定为@ngxs/store@3.4.0。

3. 统一RxJS版本 #

package.json声明rxjs@6.5.3，但实际安装了6.6.7，RxJS 6.6.x与Angular 8存在兼容性问题，修改package.json将rxjs版本锁定为6.5.3（去掉^）。

4. 彻底清理并重装依赖 #

执行以下命令清理缓存与旧依赖，重新安装：

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

注：npm 6无需使用--legacy-peer-deps，该参数为npm 7+处理peer依赖的选项。

5. 切换兼容的Node.js版本 #

Angular 8官方推荐Node.js 10.x或12.x，当前Node 14.x存在隐性兼容风险，建议使用nvm切换到Node 12.x LTS版本（如12.22.12）。

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