Angular开发构建任务如何启用类--prod的严格编译？

首先要说明：你之前尝试的"use strict"是JavaScript运行时的严格模式，和Angular/TypeScript编译阶段的严格检查完全不是一回事，所以不会触发--prod模式下的编译检测。要实现目标，我们需要从TypeScript严格类型检查、AOT编译模板检测和TSLint规则强制执行三个方面入手，具体步骤如下：

1. 启用TypeScript严格类型检查 #

--prod模式会自动启用一系列严格的TypeScript编译选项，这些可以通过修改tsconfig.json来同步到开发环境：

• 推荐直接开启顶级严格模式，一键启用所有核心严格检查：

  {
    "compilerOptions": {
      "strict": true,
      // 保留你原有其他配置...
    }
  }
  

  这个选项会自动开启noImplicitAny、strictNullChecks、noImplicitThis等十多项严格规则，完全覆盖--prod下的TypeScript类型检测要求。

• 如果你需要更精细的控制，也可以单独开启所需的严格选项：

  {
    "compilerOptions": {
      "noImplicitAny": true,       // 禁止隐式any类型
      "strictNullChecks": true,    // 严格空值检查
      "noImplicitThis": true,      // 禁止隐式this类型
      "noUnusedLocals": true,      // 检测未使用的局部变量
      "noUnusedParameters": true,  // 检测未使用的函数参数
      // 保留你原有其他配置...
    }
  }
  

2. 启用AOT编译捕获模板错误 #

--prod默认启用AOT（提前编译），而开发模式默认用JIT（即时编译）。AOT会在编译阶段就检测模板中的错误（比如绑定不存在的组件属性、指令语法错误等），这些问题在JIT模式下只会在运行时才暴露。

你可以修改package.json的scripts，给开发构建/启动命令加上--aot参数：

"scripts": {
  "ng": "ng",
  "start": "ng serve --aot",
  "build": "ng build --aot --base-href /test/",
  "prod": "ng build --prod --base-href /test/"
}

这样运行npm start或npm run build时，就会用AOT编译，提前把模板相关的错误揪出来，和--prod的检测效果一致。

3. 强制执行TSLint严格规则 #

--prod模式会严格执行TSLint的代码规范，你可以检查tslint.json，确保启用了必要的规则：

• 开启顶级严格模式，一键启用核心规范：

  {
    "rulesDirectory": ["node_modules/codelyzer"],
    "rules": {
      "strict": true,
      // 保留你原有其他规则...
    }
  }
  

• 或者单独启用关键规则，比如：

  {
    "rules": {
      "no-unused-variable": true,  // 检测未使用变量
      "no-unused-imports": true,   // 检测未使用导入
      "no-empty": true,            // 禁止空代码块
      "prefer-const": true,        // 优先使用const
      // 保留你原有其他规则...
    }
  }
  

验证效果 #

修改完成后，运行npm run build或npm start，如果代码里有死代码、类型错误、模板语法问题等，编译阶段就会直接抛出错误，和--prod模式下的检测完全一致，同时还能保留开发模式的特性（比如source map、未压缩的代码，方便调试）。

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