Angular生产构建报错：运算符'==='无法应用于number与string类型

这个问题的核心是类型不匹配，Angular在生产构建时启用了更严格的类型检查机制，而开发模式下的类型校验相对宽松，所以问题在dev环境被隐藏了，到prod构建时就暴露出来了。下面给你具体的解决步骤：

1. 明确变量的类型定义 #

首先检查你的cfgSelected变量在TS文件中的类型：如果没有显式声明类型，TypeScript会根据初始值自动推断类型。比如如果你的初始值是0或者其他数字，那cfgSelected的类型会被推断为number，但模板里你却在和字符串'1'做全等比较，这就触发了类型不兼容错误。

解决方法是显式将cfgSelected声明为string类型，同时确保selectThisOne方法的参数也是string类型：

// 在组件类中
cfgSelected: string = '1'; // 可以根据你的业务需求设置初始值，比如空字符串''

selectThisOne(id: string) {
  this.cfgSelected = id;
}

2. 统一模板中的类型匹配 #

如果你的业务场景中id确实有可能是数字类型，那需要在赋值或比较时统一类型：

• 要么在TS方法中将数字转为字符串：

  selectThisOne(id: number) {
    this.cfgSelected = id.toString(); // 把数字转为字符串后赋值
  }
  

• 要么在模板中把比较值转为数字（不推荐，尽量保持模板简洁，类型处理放在TS中）：

  <div [ngClass]="(cfgSelected === 1)?'isActive':'isNormal'" (click)="selectThisOne(1)"> bla ... </div>
  

  这种情况下要确保cfgSelected的类型是number，并且selectThisOne的参数也是number类型。

为什么dev环境正常，prod构建报错？ #

Angular在生产构建时默认启用了strictTemplates和fullTemplateTypeCheck选项，这会对模板中的表达式进行严格的类型校验；而开发模式下这些严格校验可能没有完全开启，所以类型不匹配的问题不会被检测出来。生产构建的严格校验是为了提前发现潜在的类型错误，保证代码的健壮性。

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