Angular12执行npm start报development配置不存在错误求解决方案

问题根因 #

你虽然在serve节点配置了development配置项，但该配置关联的browserTarget指向了build节点的development配置，而你提供的angular.json中architect.build.configurations下只定义了production、devnet、stage三个配置，缺失development配置，因此触发报错。

解决方案 #

方案1：新增build节点的development配置（推荐） #

在angular.json的projects.frontend-Hedgex.architect.build.configurations节点下新增development配置，示例如下：

"configurations": {
  // 保留原有production、devnet、stage配置不变，新增下面的development配置
  "development": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.ts"
      }
    ],
    "optimization": false,
    "outputHashing": "none",
    "sourceMap": true,
    "extractCss": true,
    "namedChunks": true,
    "aot": false,
    "extractLicenses": false,
    "vendorChunk": true,
    "buildOptimizer": false
  }
}

上述配置为Angular 12默认的开发环境构建参数，你可以根据实际需求调整参数，比如将with指向你本地开发专用的环境变量文件。

方案2：修改serve配置关联现有构建配置 #

如果你不需要单独的development构建配置，想直接用现有的devnet配置作为本地启动的配置，可以修改serve节点的对应配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "frontend-Hedgex:build:production"
    },
    "development": {
      "browserTarget": "frontend-Hedgex:build:devnet" // 仅修改这一行的指向即可
    }
  },
  "defaultConfiguration": "development"
}

修改完成后重新执行npm start即可正常启动项目。

内容的提问来源于stack exchange，提问作者Mohit Kumar Sharma