Angular开发服务器始终使用生产环境变量的问题如何解决？

嘿，我之前也碰到过一模一样的情况！别着急，咱们从几个最常见的原因入手排查解决：

1. 检查angular.json中的环境映射配置 #

这是最容易踩坑的地方，得确保环境文件的替换规则完全正确：
打开你的angular.json，找到projects -> [你的项目名称] -> architect -> build -> configurations节点，确认开发、生产环境对应的文件替换关系：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    // 其他生产相关配置...
  },
  "development": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.ts"
        // 如果你单独维护了environment.dev.ts，就替换成这个文件路径
      }
    ]
  }
}

同时别忘了检查architect -> serve -> configurations，确保开发服务的默认配置是development：

"serve": {
  "configurations": {
    "production": {
      "browserTarget": "[你的项目名称]:build:production"
    },
    "development": {
      "browserTarget": "[你的项目名称]:build:development"
    }
  },
  "defaultConfiguration": "development" // 重点！这里一定要设为development
}

2. 确认启动命令是否正确 #

• 正常启动开发服务器应该用：ng serve，只要上面的默认配置没问题，这个命令会自动加载开发环境变量。
• 如果你不小心用了ng serve --configuration production或者ng serve --prod，那肯定会加载生产环境的配置，赶紧换回普通的ng serve！

3. 清理缓存 #

有时候Angular CLI的缓存或者浏览器缓存会搞鬼：

• 清理Angular CLI缓存：运行ng cache clean（Angular 12+可用，旧版本可以用ng serve --no-cache启动服务）
• 清理浏览器缓存：按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或者直接清空浏览器的缓存数据。

4. 检查导入路径是否存在歧义 #

虽然你的导入语句看起来没问题，但如果environments文件夹下有多个环境文件，且你手动调整过文件结构，再确认下导入的environment是不是指向了正确的文件。Angular会根据构建配置自动替换文件，但如果路径写错，也可能加载到错误的环境变量。

按照这几步排查下来，应该就能解决问题啦！

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