通过Github Actions部署Angular至Firebase Hosting预览渠道时，环境文件替换失效（始终使用生产配置）

我完全懂你现在的头疼——明明在Github Actions里指定了用preview配置构建，结果部署到预览渠道后却还是用生产环境的API地址，怎么调都没用对吧？咱们一步步拆解问题，找出根源：

可能的问题点及解决方案 #

1. Firebase Web Frameworks 实验特性在“自动帮忙”

你在Actions脚本里设置了FIREBASE_CLI_EXPERIMENTS: webframeworks，这个特性的初衷是简化框架部署，但它会自动检测项目的构建命令，有可能跳过你手动执行的npm run build:preview，转而默认用生产构建或者基础的ng build命令，这就导致预览配置根本没生效。

解决办法二选一：

• 直接禁用这个实验特性：删掉Actions脚本里的env: FIREBASE_CLI_EXPERIMENTS: webframeworks这一段，然后确保部署步骤指向正确的构建产物目录。
• 明确告诉Firebase用你的预览构建命令：在firebase.json的hosting节点里添加构建命令配置，让它强制使用preview构建：

  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1",
      "buildCommand": "npm run build:preview"
    }
  }
  

2. 预览与生产环境的构建输出路径冲突

你的angular.json里，preview和production配置的outputPath都是dist/enotrak——虽然Github Actions每次都是全新环境，但难保不会有缓存残留（或者Firebase检测到同名目录时优先用旧的生产产物）。

解决办法：
给预览环境单独设置输出路径，避免和生产环境混淆：

• 修改angular.json里的preview配置：

  "preview": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.preview.ts"
      }
    ],
    "outputHashing": "all",
    "outputPath": "dist/enotrak-preview"
  }
  

• 同步修改package.json里的build:preview命令，去掉重复的--output-path参数：

  "build:preview": "ng build -c preview"
  

• 最后在Actions的部署步骤里指定使用这个新的输出目录：

  - name: Deploy to Firebase Hosting Preview Channel
    uses: FirebaseExtended/action-hosting-deploy@v0
    with:
      repoToken: '${{ secrets.GITHUB_TOKEN }}'
      firebaseServiceAccount: '${{ secrets.GCP_CREDENTIALS }}'
      projectId: 'eno-trak'
      channelId: preview
      expires: 7d
      entryPoint: dist/enotrak-preview # 指定预览构建的产物目录
  

3. 先验证构建产物是否正确

有时候问题出在构建阶段，而不是部署阶段——你可以在Actions里加一步，直接查看构建后的环境文件内容，确认preview配置有没有被正确打包进去：

- name: Verify Preview Environment Config
  run: cat dist/enotrak-preview/assets/environment.js # 路径根据你的Angular版本调整，也可以用grep查找API地址：grep "API_URL" dist/enotrak-preview/main.*.js

如果这一步输出的是预览环境的API地址，那问题就出在部署环节；如果还是生产地址，那就要回头检查angular.json的fileReplacements配置是否正确，或者package.json的构建命令有没有写错。

4. 清理构建目录确保干净

在构建前加一步清理dist目录的操作，彻底避免旧产物干扰：

- name: Clean Previous Build Artifacts
  run: rm -rf dist

总结 #

先从验证构建产物开始，确认preview配置是否被正确应用；然后排查Firebase的webframeworks特性是否抢了你的构建命令；最后调整输出路径避免冲突。按这个顺序排查，应该能解决你的问题。

内容来源于stack exchange