Angular 11中使用@ViewChild绑定NgForm出现编译报错如何解决？

问题根因 #

报错的核心原因是Angular相关依赖包版本严重不兼容，从你提供的版本信息可见：

• @angular/core等核心运行时包版本为11.2.14
• @angular/compiler、@angular/compiler-cli、@angular-devkit/build-angular等编译相关包版本停留在9.x大版本
• @angular/cdk版本为12.x，和核心包跨了两个大版本

Angular的Ivy编译模式要求编译工具包和核心运行时包版本严格对齐，不同大版本的内部API（比如你遇到的ɵɵviewQuery、ɵɵstaticViewQuery这类内部编译API）参数、存在性都有差异，才会触发类型不匹配、导出找不到的错误。

解决方案 #

步骤1：统一所有依赖包版本 #

手动修改package.json文件，将所有相关依赖版本对齐：

• 所有@angular/前缀的包（包括@angular/cdk）版本统一为11.2.14
• @angular-devkit/build-angular版本改为0.1102.15，和其余@angular-devkit包版本对齐

步骤2：清理并重装依赖 #

依次执行以下操作：

• 删除项目根目录下的node_modules文件夹
• 删除项目根目录下的package-lock.json（用yarn的话删yarn.lock）
• 执行npm cache clean --force清理npm缓存
• 执行npm install重新安装所有依赖

步骤3：校验ViewChild写法 #

版本统一后你原有的ViewChild写法无需修改即可正常运行：

@ViewChild("frm", { static: false }) form: NgForm;

static: false是Angular 8+的默认配置，你的表单元素没有被结构指令包裹的情况下，运行时可以正常获取到NgForm实例。

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