Deploying to multiple firebase sites using angularFire and ng deploy

[h11a]

Versions:
"@angular/cli": "^14.2.10",
"@angular/cdk": "^14.2.1",
"@angular/fire": "^7.4.1",
"firebase": "^9.6.8",

I am having issues with setting up config to allow deploying to a dev/prod sites on Firebase hosting. The sites on firebase are in the same firebase project

I have followed this guide
https://github.com/angular/angularfire/blob/master/docs/deploy/getting-started.md

but I am receiving the same issue as these old unanswered github issues
#3077

#3076

Here is my setup

1. angular.json

   "deploy": {
                    "builder": "@angular/fire:deploy",
                    "options": {
                        "firebaseProject": "<<MY_FIREBASE_PROJECT_ID>>",
                        "siteTarget": "devTarget",
                        "buildTarget": "<<MY_ANGULAR_PROJECT>>:build:development"
                    },
                    "configurations": {
                        "dev": {
                            "firebaseProject": "<<MY_FIREBASE_PROJECT_ID>>",
                            "siteTarget": "devTarget",
                            "buildTarget": "<<MY_ANGULAR_PROJECT>>:build:development"
                        },
                        "prod": {
                            "firebaseProject": "<<MY_FIREBASE_PROJECT_ID>>",
                            "siteTarget": "prodTarget",
                            "buildTarget": "<<MY_ANGULAR_PROJECT>>:build:development"
                        }
                    }
                }
            }

2. firebase.json

{
    "hosting": [
        {
            "target": "devTarget",
            "public": "dist",
            "ignore": [
                "**/.*"
            ]
        },
        {
            "target": "prodTarget",
            "public": "dist",
            "ignore": [
                "**/.*"
            ]
        }
    ]
}

3. .firebaserc

{
  "projects": {
    "default": "<<MY_FIREBASE_PROJECT_ID>>"
  },
  "targets": {
    "<<MY_FIREBASE_PROJECT_ID>>": {
      "hosting": {
        "devTarget": [
          "<<DEV_SITE_ID>>"
        ],
        "prodTarget": [
          "<<PROD_SITE_ID>>"
        ]
      }
    },
  "etags": {}
}

Should this work if i run ng deploy <<MY_ANGULAR_PROJECT>> --configuration='dev'?

I receive the following error from node_modules\@angular\fire\schematics\deploy\builder.js:36:15

An unhandled exception occurred: The Firebase Hosting Site specified by your angular.json or .firebaserc is in conflict

[google-oss-bot]

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

[liesahead]

There's ambiguous code which doesn't allow multiple hosts it seems 😠

[liesahead]

@davideast , could you clarify if the development team is planning to check the issues?

Because currently from what I see the relevant ones deserve no attention and it's easier to work with plain firebase as, for example, it's not possible to set up multiple hosts with angular fire.

[davideast]

@liesahead We are working on getting AngularFire up to date with TypeScript 5 and the latest Firebase SDK. Once that is complete we'll focus on this issue

[liesahead]

@davideast , great, thanks!

[AlmaniaM]

Any progress or updates on this? I have the same issue.

[JoanSernaLeiton]

any update on this ?

[pdela]

Any update?

[pdela]

I found out what's wrong:
In angularfire/schematics/deploy/builder.ts the function below receives the angular project name, not the firebase target alias:

const [defaultFirebaseProject, defulatFirebaseHostingSite] = getFirebaseProjectNameFromFs(
context.workspaceRoot,
context.target.project
);

I managed to have it working by manually adding this to .firebaserc:

"targets": {
[FIREBASE_PROJ_ID]: {
"hosting": {
.....
[ANGULAR_PROJECT_NAME]: [
"HOSTING_SITE_ID"
]
}
}
},

Of course this means to manually change the hosting site id everytime I want to switch from the "staging" site to the "production" site and viceversa.

PS
Unfortunately even this doesn't solve my problem as i'm trying to use firebase experimental webframework support for ssr.
While using ng deploy it seems the site got built once, but then firebase-tools kick in to deploy and, due to the webframework support, the site gets built again this time always using the production configuration, even if the default configuration in angular.json is set to staging. I'll post an issue with firebase-tools.

[alejandroquadri]

Having the same problem

[pdela]

Having the same problem

The issue persists, but managed to do it by using firebase directly (no more ng deploy) using the FIREBASE_FRAMEWORKS_BUILD_TARGET variable.
here my npm scripts:
"b-d": "firebase deploy --only hosting:prod-web-target",
"b-d-test": "set FIREBASE_FRAMEWORKS_BUILD_TARGET=staging&& firebase deploy --only hosting:test-web-target",

Notice no space between "staging&&"

Where "staging" is my build option in angular.json.

Hope this helps.

[alejandroquadri]

thanks @pdela! It works!

The correct script on a mac would be:
"b-d-test": "FIREBASE_FRAMEWORKS_BUILD_TARGET='staging' firebase deploy --only hosting:test-web-target",