ng build默认构建开发环境而非生产环境的原因及解决方法

原因分析 #

1. Angular CLI 默认行为：ng build 命令本身默认关联**开发环境（development）**配置，这是因为项目根目录下的 angular.json 中，build 节点的 defaultConfiguration 参数被设置为了 development。
2. ng build --prod 能构建生产环境，是因为 --prod 参数是 Angular CLI 内置的快捷参数，会自动切换到 production 配置项；而 npm run build 能正常构建生产环境，是你的 package.json 里的 build 脚本已经配置了 --prod 或指定了生产环境配置。

配置文件示例 #

package.json 脚本部分 #

{
  "scripts": {
    "build": "ng build --prod"
  }
}

angular.json 核心配置部分 #

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // 通用构建基础配置
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false
              // 其他生产环境专属配置
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ],
              "optimization": false,
              "outputHashing": "none",
              "sourceMap": true
              // 其他开发环境专属配置
            }
          },
          "defaultConfiguration": "development" // 关键默认配置项
        }
      }
    }
  }
}

修复方案 #

方案1：修改默认配置为生产环境 #

直接编辑 angular.json，将对应项目 build 节点下的 defaultConfiguration 值改为 production：

"defaultConfiguration": "production"

修改后执行 ng build 就会默认构建生产环境。

方案2：优化npm脚本区分环境 #

如果不想改动CLI默认行为，可以在 package.json 中新增开发环境构建脚本，明确区分环境：

{
  "scripts": {
    "build": "ng build --prod",
    "build:dev": "ng build"
  }
}

后续用 npm run build 构建生产环境，npm run build:dev 构建开发环境。

方案3：手动指定环境构建 #

无需修改任何配置，每次需要生产环境构建时执行：

ng build --configuration production

或保留原有的快捷命令：

ng build --prod

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