[Firebase App Hosting] Error during Angular build on Firebase App Hosting triggered by GitHub Actions

[Biokimist]

[REQUIRED] Environment info

Firebase CLI: 13.11.1 Angular CLI: 18.0.3 Node: 20.13.1 Package Manager: npm 9.6.5 OS: win32 x64

[REQUIRED] Test case

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/cdk": "^18.0.2",
    "@angular/common": "^18.0.2",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/fire": "^18.0.1",
    "@angular/forms": "^18.0.2",
    "@angular/material": "^18.0.2",
    "@angular/material-moment-adapter": "^18.0.2",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/service-worker": "^18.0.2",
    "@swimlane/ngx-charts": "^20.5.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.3",
    "@angular/cli": "^18.0.3",
    "@angular/compiler-cli": "^18.0.0",
    "@types/d3-shape": "^3.1.6",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^20.14.2",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "sass": "^1.77.4",
    "typescript": "~5.4.2"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-project": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/my-project",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/custom-theme.scss",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2MB",
                  "maximumError": "4MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kB",
                  "maximumError": "4kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "my-project:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "my-project:build:production"
            },
            "development": {
              "buildTarget": "my-project:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

firebase-hosting-merge.yml

#This file was auto-generated by the Firebase CLI
#https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - firebase-deploy-prod
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_MY_PROJECT_PROD }}
          channelId: live
          projectId: my-project-prod

[REQUIRED] Steps to reproduce

1. Push code to the firebase-deploy-prod branch.
2. Cloud Run triggers the build process with npm ci and npm run build.

[REQUIRED] Expected behavior

The build process should complete successfully, allowing the deployment to Firebase Hosting.

[REQUIRED] Actual behavior

Step #2: Error: Only the Angular application builder is supported. Please refer to https://angular.dev/tools/cli/esbuild#for-existing-applications guide to upgrade your builder to the Angular application builder.

[Biokimist]

I don't know how, i'm a little confused, but the deployment actually worked.

I changed the budget allocation for angular build before a new git push.

       "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                  "maximumWarning": "2MB",
                  "maximumError": "4MB"
                },

It maybe be me, or the displayed error was wrong and shouldn't be "Only the Angular application builder is supported"