使用ng deploy部署Angular项目到多Firebase Hosting环境遇错

问题描述 #

我有开发和生产两个Firebase项目，希望通过ng deploy --configuration=<environment>命令实现分环境部署。先通过ng add @angular/fire配置好第一个项目，之后修改了firebase.json、.firebaserc和angular.json（配置详情见下文）。目前ng deploy --configuration=production可正常部署，但ng deploy --configuration=development抛出错误：

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

尝试过用firebase use手动切换项目后重新执行ng add @angular/fire，问题仍未解决，需要实现通过配置参数切换完成两个环境的部署。

依赖版本：

• @angular/fire ^7.5.0
• @angular/cli ^15.2.0
• 全局firebase-tools@11.24.0

当前配置文件 #

firebase.json

{
  "hosting": [
   {
      "target": "<my-angular-project>",
      "public": "dist/<my-angular-project>"
   },
   ...
 ]
}

.firebaserc

{
  "projects": {
    "production": "<firebase-prodution-project>",
    "development": "<firebase-development-project>",
    "default": "<firebase-prodution-project>"
  },
  "targets": {
    "<firebase-prodution-project>": {
      "hosting": {
        "<my-angular-project>": [
          "<firebase-producion-project-web-app>"
        ]
      }
    },
    "<firebase-development-project>": {
      "hosting": {
        "<my-angular-project>": [
          "<firebase-development-project-web-app>"
        ]
      }
    }
  },
  "etags": {}
}

angular.json

{
 ...
 "projects": {
    "<my-angular-project>": {
       ...
       "architect": {
          ...
          "deploy": {
             "builder": "@angular/fire:deploy",
             "options": {
                 ...
                 "browserTarget": "<my-angular-project>:build:development",
                 "buildTarget": "<my-angular-project>:build:development",
                 "firebaseProject": "<firebase-development-project>",
                 "firebaseHostingSite": "<firebase-development-project-web-app>"
             },
             "configurations": {
                "production": {
                  "browserTarget": "<my-angular-project>:build:production",
                  "firebaseProject": "<firebase-prodution-project>",
                  "firebaseHostingSite": "<firebase-prodution-project-web-app>"
                },
                "development": {
                  "browserTarget": "<my-angular-project>:build:development",
                  "firebaseProject": "<firebase-development-project>",
                  "firebaseHostingSite": "<firebase-development-project-web-app>",
                }
             }
          }
       }
    }
  }
}

问题根源 #

1. angular.json中同时指定firebaseProject（项目ID）和firebaseHostingSite，与.firebaserc中已绑定的项目-站点target配置冲突
2. .firebaserc和angular.json中存在拼写错误（如prodution应为production），导致配置匹配失败

修复步骤 #

1. 修正angular.json配置 #

移除firebaseHostingSite字段，改用target关联.firebaserc中的目标，同时将firebaseProject改为.firebaserc中定义的别名（而非项目ID）：

{
 ...
 "projects": {
    "<my-angular-project>": {
       ...
       "architect": {
          ...
          "deploy": {
             "builder": "@angular/fire:deploy",
             "options": {
                 ...
                 "browserTarget": "<my-angular-project>:build:development",
                 "buildTarget": "<my-angular-project>:build:development",
                 "firebaseProject": "development",
                 "target": "<my-angular-project>"
             },
             "configurations": {
                "production": {
                  "browserTarget": "<my-angular-project>:build:production",
                  "firebaseProject": "production"
                },
                "development": {
                  "browserTarget": "<my-angular-project>:build:development",
                  "firebaseProject": "development"
                }
             }
          }
       }
    }
  }
}

2. 修正.firebaserc拼写错误 #

将所有prodution改为production，确保项目ID和站点ID与Firebase控制台一致：

{
  "projects": {
    "production": "<firebase-production-project>",
    "development": "<firebase-development-project>",
    "default": "<firebase-production-project>"
  },
  "targets": {
    "<firebase-production-project>": {
      "hosting": {
        "<my-angular-project>": [
          "<firebase-production-project-web-app>"
        ]
      }
    },
    "<firebase-development-project>": {
      "hosting": {
        "<my-angular-project>": [
          "<firebase-development-project-web-app>"
        ]
      }
    }
  },
  "etags": {}
}

3. 验证firebase.json配置 #

确保hosting条目仅保留target和public字段，无需额外站点指定：

{
  "hosting": [
   {
      "target": "<my-angular-project>",
      "public": "dist/<my-angular-project>"
   }
 ]
}

4. 清除缓存并重新部署 #

执行以下命令清理本地缓存并重新登录Firebase：

ng cache clean
firebase logout && firebase login

之后分别测试部署：

ng deploy --configuration=development
ng deploy --configuration=production

额外注意事项 #

• 确保本地登录的Firebase账号拥有两个项目的部署权限
• 检查dist目录路径与firebase.json中public字段完全匹配
• 避免同时使用firebaseHostingSite和target字段，优先通过.firebaserc的target绑定管理项目与站点的关联

内容的提问来源于stack exchange，提问作者程柏硯