Angular4执行ng build --env=prod时环境变量不生效求助

这个问题在Angular CLI 1.x版本里算是个常见的“坑”，我来帮你排查和解决：

最可能的原因：.angular-cli.json配置位置错误 #

首先检查你的.angular-cli.json结构——环境配置必须放在apps数组内对应的应用对象里，而不是文件的根级别。很多人容易犯这个错，导致CLI无法读取自定义的环境映射。

错误的配置结构： #

{
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts",
    "staging": "environments/environment.staging.ts"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      // ...其他配置
    }
  ]
}

正确的配置结构： #

把environmentSource和environments移到apps[0]对象内部：

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      // ...其他配置
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "staging": "environments/environment.staging.ts"
      }
    }
  ]
}

第二可能：CLI缓存导致旧环境变量残留 #

Angular CLI会缓存构建文件，有时候即使修改了配置，缓存里的旧代码还会被复用。可以通过添加--no-cache参数强制清理缓存构建：

ng build --env=prod --no-cache

额外验证步骤 #

1. 构建完成后，打开dist文件夹里的main.[hash].js文件，搜索restUrl关键词，确认值是否是生产环境的http://139.130.4.5:3000/，而不是localhost。
2. 如果需要启用生产模式的优化（压缩、树摇等），可以结合--prod参数：

ng build --prod --env=prod

（注：--prod在CLI 1.x中会默认启用prod环境，但如果你要指定staging环境，必须明确加--env=staging）

排除其他小概率问题 #

• 确认代码中没有硬编码localhost的地址，所有环境变量都通过import { environment } from '../../environments/environment'引入；
• 检查environment.prod.ts和environment.staging.ts的文件路径是否和.angular-cli.json里配置的一致，有没有拼写错误。

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