Angular中如何为指定组件开启/关闭strictTemplates检查？

先说清楚：Angular本身没有直接给单个组件单独配置strictTemplates的开关，但有两个实用路径能实现你逐个组件开启检查的重构需求：

路径一：利用组件元数据的strictTemplates属性（Angular 14+支持） #

从Angular 14开始，@Component装饰器新增了strictTemplates配置项，直接给需要重构的组件加上这个配置即可，全局保持strictTemplates: false完全不影响。

示例代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css'],
  // 单独为该组件开启严格模板检查
  strictTemplates: true
})
export class TargetComponentComponent {
  // 组件业务逻辑
}

这种方式最直接，完美适配你逐个组件重构的场景，不用折腾多tsconfig文件。

路径二：用tsconfig继承+指定文件范围（解决之前配置不生效的问题） #

你之前尝试多tsconfig没生效，大概率是配置写法有误。正确操作步骤：

1. 保留根目录tsconfig.json，全局关闭strictTemplates，作为基础配置文件。
2. 创建tsconfig.strict-templates.json，继承根配置并开启严格检查，同时指定仅包含需要检查的组件：

{
  "extends": "./tsconfig.json",
  "angularCompilerOptions": {
    "strictTemplates": true
  },
  "include": [
    "src/app/target-component/**/*",
    "src/app/another-strict-component/**/*"
  ],
  "exclude": [
    "src/app/**/*.spec.ts"
  ]
}

3. 运行检查或构建时，显式指定该配置文件：

ng lint --tsConfig tsconfig.strict-templates.json
# 构建时指定配置
ng build --tsConfig tsconfig.strict-templates.json

这个路径适合批量处理组件，若你是逐个重构组件，路径一更灵活高效。

额外注意点 #

• 组件自身的strictTemplates配置优先级高于全局配置，即使全局关闭，单个组件的开启设置依然生效。
• 若你的Angular版本低于14，只能使用路径二，或先升级到14+版本再使用路径一。

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