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",
"buildrod": "ng build -c production",
"buildreview": "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 buildreview

# 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

Continue reading...