Angular 9升级至14后编译失败问题求助

问题背景 #

将继承的Angular 9项目升级到14版本后，出现一系列与Material模块、Form模块相关的错误，怀疑是模块导入/声明/配置问题，但无从下手排查。对Angular编译机制中的ngcc/Ivy不了解，猜测可能存在路径匹配问题。

错误详情 #

• ng8001：mat-icon、mat-checkbox、mat-tab-group等"mat-ELEMENT"不是已知元素
• ng8002：无法绑定某个属性，因为它对应元素的已知属性中不存在该属性
• TS2322：使用ngModel绑定时出现类型错误，'Event'类型无法分配给'string'类型

注：这类错误通常由模块未正确导入导致，比如mat-icon报错需在组件所属模块导入MatIconModule，ngModel报错需导入FormsModule，但已确认相关模块已正确导入。

已尝试操作 #

删除package.lock和node_modules后重新安装依赖：

rm -d -r node_modules
pnpm install

原项目在Angular 9 + Yarn环境下可正常运行，当前使用PNPM + Angular 14编译。

疑问解答 #

1. Angular 14是否支持PNPM？若支持，应如何运行？是ng serve还是pnpm start？ #

Angular 14完全支持PNPM。运行方式取决于package.json中的scripts配置：

• 如果scripts里配置了"start": "ng serve"，可直接使用pnpm start启动项目
• 也可以直接执行ng serve，前提是Angular CLI已全局安装；若仅安装在项目本地，可通过pnpm exec ng serve调用本地CLI

2. 是否可能是模块中的错误导致整个模块失效，进而无法导入Material和FormsModule？ #

是的，这种情况完全可能。如果模块本身存在语法错误、循环依赖，或者导入的其他自定义模块有问题，会导致Angular无法正确解析该模块，进而使得模块内导入的MatXXXModule、FormsModule等无法被识别。
排查方向：

• 检查组件所属模块的@NgModule装饰器代码，确认无语法错误
• 检查模块中导入的其他自定义模块是否存在问题，比如是否未正确导出组件/指令
• 查看编译日志中的前置错误，可能有其他错误导致模块解析失败

3. 在tsconfig或angular.json文件中，有哪些调试细节需要注意？ #

tsconfig.json相关：

• 检查compilerOptions.paths配置：如果有自定义路径映射，需确保映射路径正确指向node_modules中的Material/Forms模块，避免路径解析错误
• 确认compilerOptions.module设置为ES2020或符合Angular 14要求的模块格式
• 检查angularCompilerOptions：确保enableIvy设置为true（Angular 14默认启用Ivy，无需手动关闭），避免与旧版View Engine配置冲突

angular.json相关：

• 检查projects.[projectName].architect.build.options中的preserveSymlinks：如果使用了符号链接，开启该选项可能解决模块解析问题
• 确认projects.[projectName].architect.build.options.tsConfig指向正确的tsconfig.json文件
• 检查assets、styles配置：确保Material的样式文件（如@angular/material/prebuilt-themes/indigo-pink.css）已正确导入，虽不会直接导致元素识别错误，但可能影响整体模块加载

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