Angular项目中如何为旧组件模板设置类似TS的检查禁用机制，以逐步启用严格编译选项？

我太懂这种维护大型旧Angular项目的两难了——想全局开启严格编译选项来保障新代码的质量，但旧组件因为混用了mixin和老式@Input装饰器，模板检查直接炸锅，总不能一下子把所有旧代码都重构完对吧？下面给你几个实用的方案，帮你实现“新代码用严格检查，旧代码先躺平”的目标：

• 组件级别禁用模板严格检查
  从Angular 14开始，你可以直接在旧组件的@Component装饰器里添加strictTemplates: false，覆盖全局tsconfig里的strictTemplates: true设置。这样这个组件的模板就会跳过严格检查，而新写的组件默认继承全局的严格规则，完美区分新旧代码：

  @Component({
    selector: 'app-legacy-component',
    templateUrl: './legacy-component.component.html',
    // 禁用当前组件的严格模板检查，适配旧代码
    strictTemplates: false
  })
  export class LegacyComponent extends SomeMixinWithOldInputs {
    // 旧组件逻辑
  }
  

  这个方案最直接，完全对应你给TS文件加// @ts-nocheck的思路，全局开严格，单个旧组件关。

• 临时绕过mixin输入属性的类型检查
  针对Angular分析不了mixin中@Input的问题，你还可以在组件类里手动“声明”这些属性（用类型断言或者忽略检查），让模板编译器能识别到它们，这样即使开了strictTemplates，模板里用这些属性也不会报错：

  export class LegacyComponent extends SomeMixinWithOldInputs {
    // 手动声明mixin带来的输入属性，让Angular能识别
    /* @ts-ignore */
    @Input() legacyInput!: string;
  
    // 或者用类型断言的方式
    get legacyInput(): string {
      return (this as unknown as { legacyInput: string }).legacyInput;
    }
  }
  

  这种方式适合你想保留组件级严格检查，只是针对mixin的属性做临时兼容的场景。

• 分模块配置编译选项
  如果你的项目是按模块拆分的（比如旧代码集中在src/app/legacy目录，新代码在src/app/new），还可以在根tsconfig里全局开启严格选项，然后给旧模块单独写一个tsconfig.legacy.json，在里面把strictTemplates和其他相关严格选项设为false，接着在angular.json里指定旧模块使用这个配置文件编译。这样整个旧模块的代码和模板都会跳过严格检查，不用一个个组件去修改，效率更高。

当然，这些都是过渡性的兼容方案，等后续有时间了还是建议逐步重构旧组件的mixin和@Input写法，毕竟严格编译选项能帮你提前排查很多潜在的代码问题，提升项目的长期可维护性。

内容来源于stack exchange