Angular 8.x升级9.x后模板变量赋值报错,如何定位对应模板文件?
升级Angular 8到9后模板变量赋值错误的定位方法
我正在使用ng update将应用从Angular 8.x升级至9.x(为后续升级到最新版本做准备),升级完成后,使用ionic serve启动应用时出现如下错误:
[ng] ERROR in Error: Cannot assign value "$event" to template variable "option". Template variables are read-only. [ng] at _AstToIrVisitor.visitPropertyWrite (/Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:8923:31) [ng] at PropertyWrite.visit (/Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:7795:28) [ng] at convertActionBinding (/Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:8524:49) [ng] at prepareEventListenerParameters (/Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:17703:27) [ng] at Object.params (/Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:18828:24) [ng] at /Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:18599:94) [ng] at Array.map (<anonymous>) [ng] at /Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:18599:60) [ng] at /Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:17860:87) [ng] at Array.map (<anonymous>) [ng] at TemplateDefinitionBuilder.buildTemplateFunction (/Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:17860:60) [ng] at /Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:18401:60) [ng] at /Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:17838:81) [ng] at Array.forEach (<anonymous>) [ng] at TemplateDefinitionBuilder.buildTemplateFunction (/Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:17838:37) [ng] at /Users/demami/Projects/claimocity-mobile/mobile-ui/node_modules/@angular/compiler/bundles/compiler.umd.js:18401:60)
已排查并修复了模板中其他赋值给模板变量的问题,但找不到导致当前报错的模板文件,可通过以下方法定位:
- 启用详细编译日志:修改
angular.json中build配置的options,添加"verbose": true;或者直接用命令ionic serve -- --verbose启动应用,编译时会输出包含出错模板路径的详细日志。 - 全局搜索问题代码:在项目中全局搜索所有
.html文件,查找包含option = $event的代码片段,这类对模板变量直接赋值的操作就是报错的原因。 - 开启编译器调试模式:在
tsconfig.json中添加angularCompilerOptions配置:
重新编译后,错误栈会显示更具体的模板位置信息。"angularCompilerOptions": { "debug": true } - 逐步排查模块:暂时注释掉部分模块的导入,逐步缩小范围,直到找到触发错误的模块,再深入该模块下的模板文件逐一排查。
内容的提问来源于stack exchange,提问作者David Emami
相关产品推荐
相关产品推荐

