Angular应用部署Firebase Hosting时框架检测失败问题排查

错误原因分析 #

1. 构建产物目录问题：firebase.json中source指向的dist/palm-api-app目录不存在，或构建路径与angular.json的outputPath不匹配，导致Firebase无法检测到框架相关文件。
2. 配置文件错误：firebase.json中source指向构建后目录而非项目根目录，Firebase需要从根目录读取angular.json、package.json等文件识别框架；多余的frameworksBackend配置可能干扰检测逻辑。
3. 版本兼容问题：firebase-tools（13.1.0）与@angular/fire版本不兼容，导致框架检测逻辑失效。

解决步骤 #

1. 确保构建产物存在 #

先手动执行生产环境构建，确认产物目录生成：

ng build --configuration production

检查项目根目录下是否生成dist/palm-api-app，与angular.json中build.options.outputPath完全一致。

2. 修正firebase.json配置 #

将source改为项目根目录，添加public字段指定构建产物路径，删除冗余的frameworksBackend：

{
  "hosting": [
    {
      "target": "palm-api-app",
      "source": ".",
      "public": "dist/palm-api-app",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "predeploy": [
        "ng build --configuration production"
      ]
    }
  ]
}

3. 同步依赖版本 #

更新@angular/fire和firebase-tools到兼容版本：

npm install @angular/fire@latest firebase-tools@latest

重新登录Firebase账号：

firebase logout && firebase login

4. 直接使用Angular Fire部署命令 #

绕开Firebase CLI的框架检测，执行Angular内置的deploy命令：

ng run palm-api-app:deploy

内容的提问来源于stack exchange，提问作者Sushant Patekar