Angular 12升级至16：模板TS报错的解决方案咨询

1. 让PhpStorm检测模板TS错误 #

• 打开PhpStorm设置（File > Settings），进入Languages & Frameworks > TypeScript：
  • 勾选「Enable TypeScript compiler」，并选择项目根目录的tsconfig.json作为配置文件。
• 进入Languages & Frameworks > Angular：
  • 勾选「Enable Angular language service」，在「Template checking」区域将检查级别设为「Strict」。
• 执行File > Invalidate Caches... > Invalidate and Restart，刷新缓存后PhpStorm会开始检测模板中的类型错误。

2. 生产构建时跳过模板TS检查 #

方法一：修改angular.json配置 #

打开项目根目录的angular.json，找到对应项目的生产构建配置，添加strictTemplates: false：

"projects": {
  "app": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "options": {
              "strictTemplates": false
            }
          }
        }
      }
    }
  }
}

方法二：构建命令加参数 #

直接在生产构建命令后添加--skip-template-check：

ng run app:build:production --skip-template-check

注意：这只是临时绕过方案，长期来看建议逐步修复类型问题以保证代码健壮性。

3. 其他可行的代码层面修复方案 #

• 非空断言：在模板中给data添加非空断言运算符!，明确告诉TypeScript该对象不会为undefined：

  <ion-button class="next" routerLink="/login" [disabled]="isLoading" *ngIf="data!.isAlreadyLinked">{{ 'signup.login' | transloco }}</ion-button>
  

• 组件内类型声明优化：在组件类中给data变量添加非空断言类型声明，确保TypeScript识别其非空状态：

  // 组件类中
  data!: YourDataInterface;
  

• 可选链语法：如果前置检查逻辑可靠，使用可选链?.也能绕过错误（同时保持空值安全）：

  <ion-button class="next" routerLink="/login" [disabled]="isLoading" *ngIf="data?.isAlreadyLinked">{{ 'signup.login' | transloco }}</ion-button>
  

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