ng deploy ignores --configuration option and runs always with production configuration (angular ssr)

[aponski]

Version info

Angular: 16.0.0

AngularFire: 7.6.1

Firebase-tools: 12.3.0

How to reproduce these conditions

I'm trying to deploy Angular 16 SSR app with multiple configurations set in angular.json. It seems that command ng deploy --configuration=development ignores --configuration option and always runs production configuration.

Screen from my angular.json file:

When I change "production" configuration name to "prod" in angular.json and run ng deploy --configuration=development I get "Configuration 'production' is not set in the workspace." error. This indicates that ng deploy uses hardcoded "production" configuration?

Expected behavior

ng deploy --configuration=development should build app with proper configuration

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[aponski]

Any solutions?

[davideast]

@aponski I'll look into this.

[aponski]

@davideast Any updates?

[nikxco]

I'm facing a similar issue, Is any fix available? @davideast

[FranzStrudel]

@davideast Do you have any updates on this issue ?

[msacket]

Still not working; however, if you change the options, you can get it to work on the desired target. Using some sort of prebuild script, one might be able to swap the configurations out.

{
    "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "version": 2,
            "buildTarget": "app:build:staging",
            "serveTarget": "app:serve:staging",
            "firebaseProject": "my-awesome-project"
          }
    }
}

[RignonNoel]

Ohhh! So that's FINALLY the thread that explain why I'm killing myself since two days now...Not even a note in any documentation even half a year after the problem is discovered and documented 😥

@davideast : Can you give any update on this problem ? I would be happy to help if needed, it's clearly a main blocker for newcomers that are moving to Angular 17 with SSR by default. They will all have a bad opinion of the integration if they search for days like me.... (and also I prefer fixing this problem than developing a fix in intern to remove it in some time 😉 )

[msacket]

@RignonNoel I killed a day or two too. I'd like to see a concise, but complete, configuration of the angular.json, firebase.json and .firebaserc files for a project that has development (local emulators), staging (firebase project), production (firebase project). It took a long time to get a working configuration for a project that wasn't brand new. In retrospect, I think most of the issues were related to this flag not working.

[RignonNoel]

I digged a bit more into AngularFire, Angular-cli and firebase-tools codebase to try understand the flow.

There are TWO build of the application, back to back:

1. The first one is done by AngularFire, and it works great with the configurations. In fact after some digging it's clear that the param to use configuration option on ng deploy function has been added months ago on Angular-cli. I even double check manually in debug mode and everything is great on that point.
2. The second one is done by firebase-tools (called via the code inside AngularFire), and this one is not working at all, taking the production as a default and not taking in account the configuration.

So the problem is that firebase-tools do not use the build already done by AngularFire but in place re-trigger a build for nothing. And I don't see any way of "by-passing" the second build.

The project I use is brand new, from angular v17.1, see the config linked to this comment.

@davideast would you have any input on how to make this flow works ? Any snippets, repository example or piece of knowledge would be appreciate. I've multiple project to migrate and I'm beginning to lose my mind between these out of date docs 😭

---

Note that the AngularFire official documentation I follow is maybe already not well maintained since they speak about ssr option in the deploy section of angular.json despite the fact that on Angular v17.1 the ssr is now present on the build section...

Everything changed, @angular-devkit/build-angular:application replaced @angular-devkit/build-angular:browser in the default build configuration, but the doc are totally lost on all these points. I can't bring myself to believe that Google doesn't have documentation on the current state of the project, there must be a source of knowledge for configuring SSR... But where ??!!

---

My config

See package.json

package.json

{
  "name": "website",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:platform": "node dist/platform/server/server.mjs",
    "deploy:platform:qa": "ng run platform:deploy:qa"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/platform-server": "^17.1.0",
    "@angular/router": "^17.1.0",
    "@angular/ssr": "^17.1.2",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.1.2",
    "@angular/cli": "^17.1.2",
    "@angular/compiler-cli": "^17.1.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "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",
    "typescript": "~5.3.2",
    "firebase-tools": "^13.1.0"
  }
}

See angular.json

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "platform": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "projects/platform",
      "sourceRoot": "projects/platform/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/platform",
            "index": "projects/platform/src/index.html",
            "browser": "projects/platform/src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "projects/platform/tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "projects/platform/src/favicon.ico",
              "projects/platform/src/assets"
            ],
            "styles": [
              "projects/platform/src/styles.scss"
            ],
            "scripts": [],
            "server": "projects/platform/src/main.server.ts",
            "prerender": false,
            "ssr": {
              "entry": "projects/platform/server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "projects/platform/src/environments/environment.ts",
                  "with": "projects/platform/src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "qa": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "projects/platform/src/environments/environment.ts",
                  "with": "projects/platform/src/environments/environment.qa.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "platform:build:production"
            },
            "qa": {
              "buildTarget": "platform:build:qa"
            },
            "development": {
              "buildTarget": "platform:build:development"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "platform:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "projects/platform/tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "projects/platform/src/favicon.ico",
              "projects/platform/src/assets"
            ],
            "styles": [
              "projects/platform/src/styles.scss"
            ],
            "scripts": []
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "version": 2
          },
          "configurations": {
            "production": {
              "buildTarget": "platform:build:production"
            },
            "qa": {
              "buildTarget": "platform:build:qa"
            },
            "development": {
              "buildTarget": "platform:build:development"
            }
          }
        }
      }
    }
  }
}

See firebase.json

firebase.json

{
  "hosting": [
    {
      "target": "platform",
      "source": ".",
      "frameworksBackend": {
        "region": "us-east1"
      }
    }
  ]
}

See .firebaserc

.firebaserc

{
  "targets": {
    "my-firebase-project-name": {
      "hosting": {
        "platform": [
          "my-firebase-project-name"
        ]
      }
    }
  }
}

---

Execution result

ng run platform:deploy:qa

or

ng deploy platform --configuration qa

See the output log

result

> ng run platform:deploy:qa

Using firebase-tools version 13.1.0
Logged into Firebase as noel.rignon@fjnr.ca.
📦 Building "platform"

Initial Chunk Files   | Names         |  Raw Size | Estimated Transfer Size
main-O2IYSHJK.js      | main          | 206.22 kB |                56.71 kB
polyfills-RX4V3J3S.js | polyfills     |  33.01 kB |                10.68 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial Total | 239.23 kB |                67.38 kB

Application bundle generation complete. [6.506 seconds]
No Firebase app associated with site my-firebase-project-name, injecting project default config.
  You can link a Web app to a Hosting site here https://console.firebase.google.com/project/my-firebase-project-name/settings/general/web

   Thank you for trying our early preview of Angular support on Firebase Hosting.
   During the preview, support is best-effort and breaking changes can be expected. Proceed with caution.

   Documentation: https://firebase.google.com/docs/hosting/frameworks/angular
   File a bug: https://github.com/firebase/firebase-tools/issues/new?template=bug_report.md
   Submit a feature request: https://github.com/firebase/firebase-tools/issues/new?template=feature_request.md

   We'd love to learn from you. Express your interest in helping us shape the future of Firebase Hosting: https://goo.gle/41enW5X


Initial Chunk Files   | Names         |  Raw Size | Estimated Transfer Size
main-OWNUQPEW.js      | main          | 206.22 kB |                56.69 kB
polyfills-RX4V3J3S.js | polyfills     |  33.01 kB |                10.68 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial Total | 239.23 kB |                67.36 kB

Application bundle generation complete. [7.401 seconds]

up to date in 5s

29 packages are looking for funding
  run `npm fund` for details
i  hosting: The following function(s) are pinned to site my-firebase-project-name and will be deployed as well: ssrmyfirebaseprojectname

=== Deploying to 'my-firebase-project-name'...

i  deploying functions, hosting
i  functions: preparing codebase firebase-frameworks-my-firebase-project-name for deployment
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
i  artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
+  functions: required API cloudfunctions.googleapis.com is enabled
+  functions: required API cloudbuild.googleapis.com is enabled
+  artifactregistry: required API artifactregistry.googleapis.com is enabled
i  functions: Loading and analyzing source code for codebase firebase-frameworks-my-firebase-project-name to determine what to deploy
Serving at port 8067

i  functions: Loaded environment variables from .env.
i  functions: preparing .firebase\my-firebase-project-name\functions directory for uploading...
i  functions: packaged C:\Users\noelr\WebstormProjects\farmapp-monorepo\projects\website\.firebase\my-firebase-project-name\functions (816.13 KB) for uploading
i  functions: ensuring required API run.googleapis.com is enabled...
i  functions: ensuring required API eventarc.googleapis.com is enabled...
i  functions: ensuring required API pubsub.googleapis.com is enabled...
i  functions: ensuring required API storage.googleapis.com is enabled...
+  functions: required API pubsub.googleapis.com is enabled
+  functions: required API run.googleapis.com is enabled
+  functions: required API eventarc.googleapis.com is enabled
+  functions: required API storage.googleapis.com is enabled
i  functions: generating the service identity for pubsub.googleapis.com...
i  functions: generating the service identity for eventarc.googleapis.com...
+  functions: .firebase\my-firebase-project-name\functions folder uploaded successfully
i  hosting[my-firebase-project-name]: beginning deploy...
i  hosting[my-firebase-project-name]: found 5 files in .firebase\my-firebase-project-name\hosting
i  hosting: upload complete
+  hosting[my-firebase-project-name]: file upload complete

[msacket]

I'm confused as to why it is building twice. I just pre-rendered 34,000 static routes in about an hour... and now it's doing it again. I'm going to dig in to this a bit too.

[devomr]

I'm using ng deploy and I have the same problem. The ng deploy command takes the correct configuration, but the firebase tools trigger a 2nd deployment and it takes always the production configuration.

Anyone managed to fix this problem?

Later edit:
I found a way to make the firebase tools deployment to use the correct configuration.
If you set the variable FIREBASE_FRAMEWORKS_BUILD_TARGET=development it will take the development configuration.

But still is the problem that if you use ng deploy, it will run the build twice.

References:

• The function getFrameworksBuildTarget in the source code
• Another reported issue here

[Camille-D]

Hello,

I have exactly the same problem. Every time I want to deploy my application with the ng build --configuration development firebase deploy --hosting:development ... command, the production configuration is deployed.
I have to define a single configuration and manually change the environment.

"deploy": { "builder": "@angular/fire:deploy", "options": { "version": 2, "browserTarget": "my_project_name_angular:build:production", "serverTarget": "my_project_name_angular:server:production", "prerender": "my_project_name_angular:prerender:production" } },

or

"deploy": { "builder": "@angular/fire:deploy", "options": { "version": 2, "browserTarget": "my_project_name_angular:build:development", "serverTarget": "my_project_name_angular:server:development", "prerender": "my_project_name_angular:prerender:development" } },

I tried to use ng deploy from angular-fire, and there I have other problems, it is impossible to use ng deploy.

If anyone has an idea I'm interested because I've been looking for several days and I've exhausted all the Google posts ^^