Angular 8中如何让ng serve命令使用environment.ts而非environment.prod.ts？

我来帮你搞定这个Angular CLI配置的问题——你需要让ng serve默认加载environment.ts而非environment.prod.ts，对吧？结合你提供的angular.json内容，咱们一步步调整：

1. 排查并重置CLI的默认构建配置 #

首先，Angular 8里默认ng build不带参数时应该用开发环境（也就是environment.ts），ng build --prod才会切换到生产环境。如果你的ng build和ng serve现在都默认走生产环境，大概率是CLI的默认配置被修改了。

你可以通过这条命令重置build的默认配置：

ng config defaults.build.configuration ""

同样，重置serve的默认配置，确保它调用开发构建目标：

ng config defaults.serve.configuration ""

2. 确认angular.json中的serve配置 #

看你提供的angular.json，serve的options已经设置了"browserTarget": "UI:build"——这本来就是正确的，因为UI:build指向的是默认的开发构建配置（没有启用production里的文件替换规则）。只要上面的CLI默认配置重置完成，ng serve就会自动使用environment.ts了。

3. 验证配置是否生效 #

启动服务后，你可以在代码里快速验证当前环境：

// 随便找个组件或者服务，导入环境变量
import { environment } from '../environments/environment';

// 在ngOnInit或者构造函数里打印
console.log('当前环境是否为生产模式:', environment.production);

如果是开发环境，控制台会输出false，生产环境则是true。

可选：显式指定开发环境启动 #

如果你想更稳妥，每次启动时也可以手动指定开发环境：

ng serve --configuration development

不过重置默认配置后，这条命令就不是必需的了。

额外：自定义开发环境配置（可选） #

如果你需要给开发环境添加专属的构建参数（比如开启sourceMap、禁用优化等），可以在build的configurations里新增development节点：

"configurations": {
  "production": {
    // 你现有的生产配置内容
  },
  "development": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.ts"
      }
    ],
    "optimization": false,
    "sourceMap": true,
    "extractCss": false,
    "namedChunks": true
    // 其他你需要的开发环境配置
  }
}

然后在serve的configurations里对应添加：

"configurations": {
  "production": {
    "browserTarget": "UI:build:production"
  },
  "development": {
    "browserTarget": "UI:build:development"
  }
}

这样你就可以通过ng serve --configuration development明确调用这个自定义的开发配置了。

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