Angular模板需独立静态检查，因TS编译器不校验模板语法，仅启用strictTemplates等Angular专属配置并配合@angular-eslint，才能在构建时捕获类型错误、非法绑定等运行时隐患。
Angular模板的静态质量监控不能只靠运行时渲染或人工Code Review——ng build 时的模板解析阶段就该暴露问题，否则等到用户点击报错才发现 ngIf 绑定的是未声明变量，已经晚了。
为什么 Angular 模板需要独立于 TypeScript 的静态检查？
TS 编译器不校验模板语法，ng build 虽会做基础解析（比如未闭合标签），但默认不启用深度类型绑定检查。例如：{{ user.profile.name }} 中 user 是 any 类型，或 profile 是可选属性却没加 ?，TS 不报错，模板却在运行时崩溃。
-
strictTemplates: true必须开启，它让 Angular 编译器对模板表达式做类型推导，识别undefined访问、非法管道链等 -
strictInputAccessModifiers: true配合@Input()的!或?修饰符，防止未初始化输入被直接使用 - 仅靠
tsconfig.json不够，还需codelyzer或@angular-eslint补充规则，比如禁止内联样式、强制使用trackBy、检测未使用的templateRef
如何用 @angular-eslint 实现模板层规则可配置化？
Angular CLI 15+ 默认弃用 TSLint，@angular-eslint 是当前唯一官方推荐的模板+TS一体化检查方案。它把 HTML 模板当作 AST 解析，支持自定义规则，且能与 VS Code 插件实时联动。
- 安装后需在
.eslintrc.json中启用@angular-eslint/template插件，并添加规则如"@angular-eslint/template/eqeqeq"（检查模板中是否误用==） - 关键规则
"@angular-eslint/template/no-any-binding"可拦截[value]="anyVar"这类弱类型绑定，强制使用明确接口 - 避免在
rules里写"@angular-eslint/template/*": "error"全开——部分规则（如no-negated-async）依赖 RxJS 版本，升级前要验证兼容性 - CI 中执行
npx eslint src/**/*.html --ext .html即可单独扫描模板文件，无需启动整个构建流程
常见模板错误与对应检查手段
很多“看起来能跑”的模板，实际埋着运行时隐患。静态检查要覆盖这些高频场景：
立即学习“前端免费学习笔记（深入）”；
-
NG2008: Could not find stylesheet file：出现在动态拼接href或src时（如"{{host}}/assets/main.css"）。这不是语法错，而是 Angular 构建系统拒绝解析含插值的静态资源路径——必须改用DomSanitizer.bypassSecurityTrustResourceUrl()动态注入，或提前在构建时通过环境变量生成固定路径 -
Can't bind to 'ngModel' since it isn't a known property：通常因未导入FormsModule，但 ESLint 的@angular-eslint/template/no-unused-control-flow-directive规则能在未引入模块时提示该指令不可用 - 模板中调用无返回值方法（如
(click)="save()"）却不处理异步状态：可用@angular-eslint/template/no-call-expression禁止无副作用调用，倒逼你显式声明Promise或Observable并用async管道消费
真正难的不是加几条规则，而是让团队接受“模板也是强类型代码”——它和组件类一样需要接口定义、空值防护、变更追踪。一旦松动这个前提，所有静态检查都会退化成形式主义。
