为何Angular JIT编译模式未捕获模板变量拼写错误？

我运行着一个基于Angular 12.2.0的简单应用：

app.component.ts 内容：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  
  appName = 'test-app';
  
}

app.component.html 内容：

<p>{{appNameIncorrect}}</p>

注意模板中把变量appName拼写错误为appNameIncorrect：

• 默认AOT模式执行ng serve时，终端会正确提示错误：Property 'appNameIncorrect' does not exist on type 'AppComponent'。
• 但将angular.json中aot设为false切换到JIT模式后，执行ng serve终端未报错，浏览器控制台也无预期错误。

JIT模式本应在浏览器运行时编译代码并捕获该错误，为何实际无报错？是否存在Angular编译器规则导致此现象？使用Chrome浏览器。

原因分析 #

这是Angular JIT与AOT模式下模板检查策略差异导致的：

1. AOT模式的严格类型检查
   AOT编译是在构建阶段通过TypeScript编译器对模板做静态类型校验，它会将模板绑定与组件类的类型定义做严格匹配，一旦发现引用了不存在的属性，就会直接在构建阶段抛出错误，阻止应用启动。

2. JIT模式的默认宽松检查
   JIT编译是在浏览器运行时进行的，Angular 12默认的JIT模板检查策略是非严格模式：当模板引用了组件不存在的属性时，Angular会将其视为undefined，仅会在页面上渲染空内容，不会主动抛出错误或在控制台输出警告。这是因为早期Angular为了兼容性和运行时性能，默认放宽了JIT模式下的模板校验规则。

3. 如何让JIT模式捕获此类错误
   如果需要在JIT模式下也开启严格的模板检查，只需在tsconfig.json中启用strictTemplates选项：

{
  "compilerOptions": {
    // 其他配置...
  },
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

启用后，JIT模式下浏览器控制台会输出类似Can't bind to 'appNameIncorrect' since it isn't a known property of 'AppComponent'的错误，与AOT的校验行为保持一致。

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