Angular file replacement when deploying to Firebase Hosting via Github Actions

I have my Angular project setup with 3 environments (local, preview, and prod). I'm deploying the website to Firebase Hosting using Github Actions. I cannot seem to get the deployment to use the preview configuration when deploying to a Preview Channel. No matter what I seem to do, it ALWAYS uses the prod configuration file. Any suggestions on what I might be doing wrong? Thanks!

Environment files

environment.preview.ts - development API URL
environment.prod.ts - production API URL
environment.ts - localhost API URL

firebase.json

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1"
    }
  },
  "storage": {
    "rules": "storage.rules"
  }
}

relevant angular.json configuration

          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all",
              "outputPath": "dist/enotrak"
            },
            "preview": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.preview.ts"
                }
              ],
              "outputHashing": "all",
              "outputPath": "dist/enotrak"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          }

relevant package.json configuration

    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build -c production",
    "build:preview": "ng build -c preview --output-path=dist/enotrak",

GitHub Action script

# This workflow deploys a new version of the Angular application
# to a Firebase Hosting preview channel on every pull request.

name: Deploy to Firebase Preview Channel

# This action runs whenever dispatched from Github Actions.
on:
  workflow_dispatch:
# A single job to build and deploy the application.
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      # Step 1: Check out the repository code.
      - name: Checkout Repository
        uses: actions/checkout@v4

      # Step 2: Set up Node.js.
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      # Step 3: Install the project dependencies.
      - name: Install Dependencies
        run: npm ci --legacy-peer-deps

      # Step 4: Build the Angular application for production.
      # The '--output-path' argument specifies where the build artifacts are placed.
      # You may need to adjust the path to match your 'firebase.json' hosting configuration.
      - name: Build Angular Application
        run: npm run build:preview

      # Step 5: Deploy to Firebase Hosting as a preview channel.
      - name: Deploy to Firebase Hosting Preview Channel
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          # Your Firebase project ID. Replace this with your actual project ID.
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.GCP_CREDENTIALS }}'
          projectId: 'eno-trak'
          channelId: preview
          # Set an expiration time for the preview channel.
          expires: 7d # The preview channel will expire after 7 days.
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks

By default the Firebase frameworks integration always does its own Angular build in production mode, which ignores your fileReplacements for preview.

If you want preview channels to actually use environment.preview.ts, you have two options:

1. Static hosting (no frameworks):

   • Remove "frameworksBackend" from firebase.json.

   • Build yourself :

     ng build -c preview
     

   • Deploy the built dist/... folder via firebase deploy (or GitHub Action).

2. Keep frameworks (SSR / auto-builder):

   • You cannot force it to use preview config. Instead, create separate Hosting sites or projects and use environment variables or API endpoints per site, rather than Angular fileReplacements.

In my opinion if you only need static hosting, remove the frameworks integration and deploy the prebuilt dist — then your preview file replacements will work.