搭建Angular 16种子项目时遭遇构建错误求助

错误现象 #

执行ng serve时触发两个核心构建错误：

1. @angular/common 模块编译失败 #

$ ng serve

Build at: 2023-06-18T16:05:08.699Z - Hash: 46985977d614fe3c - Time: 7901ms

./node_modules/@angular/common/fesm2022/common.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: Cannot create property 'message' on string 'I:\AngularMigration\ip-rms-ui\node_modules\@angular\common\fesm2022\common.mjs: Unsupported syntax, expected a string literal.
  6206 |     }
  6207 |     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NgOptimizedImage, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
> 6208 |     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: NgOptimizedImage, isStandalone: true, selector: "img[ngSrc]", inputs: { ngSrc: "ngSrc", ngSrcset: "ngSrcset", sizes: "sizes", width: ["width", "width", numberAttribute], height: ["height", "height", numberAttribute], loading: "loading", priority: ["priority", "priority", booleanAttribute], loaderParams: "loaderParams", disableOptimizedSrcset: ["disableOptimizedSrcset", "disableOptimizedSrcset", booleanAttribute], fill: ["fill", "fill", booleanAttribute], src: "src", srcset: "srcset" }, host: { properties: { "style.position": "fill ? \"absolute\" : null", "style.width": "fill ? \"100%\" : null", "style.height": "fill ? \"100%\" : null", "style.inset": "fill ? \"0px\" : null" } }, usesOnChanges: true, ngImport: i0 }); }
       |
                                                                    ^^^^^^^^^^^^^^^
  6209 | }
  6210 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NgOptimizedImage, decorators: [{
  6211 |             type: Directive,'

本质是旧版构建工具无法识别NgOptimizedImage指令中使用的模板字面量语法。

2. @angular/forms 导出缺失 #

./node_modules/@angular/forms/fesm2022/forms.mjs:4277:46-62 - Error: export 'ɵcoerceToBoolean' (imported as 'ɵcoerceToBoolean') was not found in '@angular/core' (possible exports: ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CSP_NONCE, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, DestroyRef, Directive, ENVIRONMENT_INITIALIZER.. etc

原因是@angular/forms与@angular/core版本不匹配，或存在依赖版本混杂。

当前项目依赖配置 #

package.json核心依赖片段：

"dependencies": {
  "@angular/animations": "^16.0.0",
  "@angular/common": "^16.0.0",
  "@angular/compiler": "^16.0.0",
  "@angular/core": "^16.0.0",
  "@angular/forms": "^16.0.0",
  "@angular/cdk": "^16.0.0",
  "@angular/platform-browser": "^16.0.0",
  "@angular/platform-browser-dynamic": "^16.0.0",
  "@angular/router": "^16.0.0",
  "ag-grid-angular": "^25.3.0",
  "ag-grid-community": "^25.3.0",
  "bootstrap": "^4.6.0",
  "core-js": "^3.16.2",
  "lodash-es": "^4.17.21",
  "ng-inline-svg": "^13.1.2",
  "ngx-bootstrap": "^10.2.0",
  "ngx-focus-trap": "^0.0.9",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.1",
  "uuid": "^8.3.2",
  "zone.js": "~0.13.0"
},
"devDependencies": {
  "@angular-devkit/architect": "^0.1202.0",
  "@angular-devkit/build-angular": "^16.0.5",
  "@angular/cli": "~16.0.5",
  "@angular/compiler-cli": "^16.0.0",
  "@angular/language-service": "^16.0.0",
  "@angular-eslint/builder": "^16.0.0",
  "@angular-eslint/eslint-plugin": "^16.0.0",
  "@angular-eslint/eslint-plugin-template": "^16.0.0",
  "@angular-eslint/schematics": "^16.0.0",
  "@angular-eslint/template-parser": "^16.0.0",
  "@types/lodash-es": "^4.17.4",
  "@types/node": "^14.17.12",
  "eslint": "^7.30.0",
  "eslint-plugin-import": "^2.24.0",
  "eslint-plugin-jsdoc": "^35.3.0",
  "eslint-plugin-prefer-arrow": "^1.2.3",
  "ts-node": "^10.2.0",
  "typescript": "~5.0.2",
  "chromedriver": "^90.0.1",
  "@types/jasmine": "~4.3.0",
  "@types/jasminewd2": "^2.0.10",
  "jasmine-core": "~4.6.0",
  "jasmine-spec-reporter": "^7.0.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.2.0",
  "karma-coverage": "~2.2.0",
  "karma-jasmine": "~5.1.0",
  "karma-jasmine-html-reporter": "~2.0.0",
  "karma-sonarqube-unit-reporter": "^0.0.23",
  "protractor": "^7.0.0"
}

问题根源 #

1. 构建工具版本冲突：@angular-devkit/architect使用Angular 12版本（^0.1202.0），与Angular 16的构建工具不兼容，导致babel-loader无法处理新语法。
2. 第三方依赖过旧：ag-grid-angular@25.3.0、ng-inline-svg@13.1.2、ngx-bootstrap@10.2.0均不支持Angular 16，引入了不兼容代码。
3. 依赖版本混杂：部分Angular开发依赖版本不一致，引发内部API不匹配。

修复步骤 #

1. 统一Angular构建工具版本 #

将@angular-devkit/architect修改为与@angular/cli一致的版本：

"@angular-devkit/architect": "~16.0.5",

2. 升级第三方依赖到Angular 16兼容版 #

• ag-grid-angular/ag-grid-community：升级至^30.0.0及以上（Angular 16对应ag-grid 30+）
• ng-inline-svg：升级至^16.0.0及以上
• ngx-bootstrap：升级至^15.0.0及以上（ngx-bootstrap 15适配Angular 16）
• ngx-focus-trap：替换为@angular/cdk/a11y内置的focus trap功能，或寻找兼容Angular 16的替代库

3. 清理并重新安装依赖 #

# 删除依赖文件夹和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

4. 重新构建项目 #

ng serve

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