开启strictTemplates后报Template type check错误,是因为TypeScript开始严格检查模板类型:需为async管道声明Observable类型、用*ngIf="x as y"解构非空对象、为@Input()显式标注类型,并确保tsconfig配置正确、VSCode使用工作区TS版本、开发时启用ng serve --aot提前暴露问题。

Angular项目开启strictTemplates后报一堆Template type check错误
这是最常见的情况:你刚在tsconfig.json里把"strictTemplates": true打开,保存一刷新,终端和编辑器里立刻冒出几十个Property 'xxx' does not exist on type 'any'或Object is possibly 'null'。别慌,这不是代码错了,是TypeScript终于开始认真看你的模板了。
真正要做的不是关掉它,而是让模板里的表达式类型可推导:
-
async管道必须配合Observable类型声明,不能只写item$ | async却不给item$加类型,比如item$: Observable<item></item> -
*ngIf="user"之后的子模板里,user.name仍可能报错——得写成*ngIf="user as u",然后用{{ u.name }},这样TypeScript才知道u非空且有name属性 - 组件输入属性
@Input()如果没显式标注类型(比如只写@Input() data;),TS会当成any,必须写成@Input() data!: string[];或@Input() data: string[] | undefined;
VSCode里模板中跳转不到组件属性定义
Angular Language Service插件没起作用,或者起了但不识别.html文件里的绑定。核心问题往往出在项目根目录下缺少tsconfig.json或tsconfig.app.json,或者它们没被正确继承。
检查三件事:
- 确认项目根目录有
tsconfig.json,且其中"files"或"include"覆盖了src/**/*.ts和src/**/*.html - 确保
angular.json里projects.<name>.architect.build.options.tsConfig指向的是tsconfig.app.json,而不是随便一个配置文件 - VSCode右下角状态栏点一下TypeScript版本号,选“Use Workspace Version”,避免全局TS版本和项目依赖的
@angular/core不兼容
strictTemplates启用后ng build失败但ng serve正常
这是因为ng serve默认使用ng serve --aot=false(JIT模式),而ng build默认走AOT,而strictTemplates只在AOT编译阶段生效。也就是说,开发时你以为“没问题”,其实是躲过了检查。
解决方法很简单:
- 开发阶段就强制启用AOT:运行
ng serve --aot,提前暴露模板类型问题 - CI流程里务必用
ng build --prod做最终验证,不要只跑ng serve - 如果某些模板确实需要绕过(比如动态字段名),可用
$any(...)断言,但仅限极少数场景,例如{{ $any(item)[dynamicKey] }};滥用会破坏类型安全
为什么ng new生成的项目默认不开strictTemplates
Angular CLI 15+其实默认启用了strictTemplates,但前提是项目创建时选择了--strict标志。如果你没加,CLI就按老习惯生成宽松配置——不是它不想严格,是怕新人被一堆红色下划线劝退。
所以新项目起步建议直接:
- 用
ng new my-app --strict,一步到位 - 老项目升级时,在
tsconfig.app.json的"angularCompilerOptions"里手动加上"strictTemplates": true,并同步补全"strictInjectionParameters": true和"strictInputAccessModifiers": true,这三项是一体的 - 注意
strictTemplates会连带激活strictDomEventTypes等子选项,DOM事件如(click)="handler($event)"里的$event类型会从any变成MouseEvent,原有$event.target.value写法可能报错,需改为($event as MouseEvent).target
类型检查越早介入,后期重构时越省力。但别指望一次开全所有strict选项——先搞定strictTemplates,再逐步加noImplicitAny和strictNullChecks,不然第一周光修类型就能让你怀疑人生。


















