Angular 15 SSR集成@angular/fire后Firebase部署报错求助

核心配置排查 #

• 检查firebase.json的Hosting配置，确保rewrites或frameworksBackend参数完整，避免缺失服务ID或区域信息：

  {
    "hosting": {
      "public": "dist/<你的项目名>/browser",
      "rewrites": [
        {
          "source": "**",
          "run": {
            "serviceId": "<你的Cloud Run服务ID>",
            "region": "<部署区域，如us-central1>"
          }
        }
      ],
      "frameworksBackend": {
        "region": "us-central1"
      }
    }
  }
  

  注：通过ng add @angular/fire自动生成的配置可能遗漏区域，需手动补全。

• 验证angular.json的SSR构建路径匹配：

  "architect": {
    "build": {
      "options": {
        "outputPath": "dist/<你的项目名>"
      }
    },
    "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/<你的项目名>/server"
      }
    }
  }
  

修复CloudRunServiceNotFound错误 #

• 清理构建产物并重新部署：

  1. 删除本地构建目录：rm -rf dist（Linux/macOS）或rmdir /s dist（Windows）
  2. 重新构建SSR项目：ng build --configuration production && ng run <你的项目名>:server:production
  3. 带调试日志部署：firebase deploy --debug，查看Cloud Run服务创建的详细过程
  4. 若仍失败，尝试单独部署相关服务：firebase deploy --only hosting,run

• 确认当前Firebase CLI账号拥有Cloud Run Admin权限，无权限会导致服务创建失败。

解决TypeError: Cannot read properties of undefined (reading 'service') #

• 调整Firebase初始化逻辑，适配SSR环境：
  修改server.ts，确保Firebase仅在浏览器端初始化：

  import { bootstrapApplication } from '@angular/platform-browser';
  import { AppComponent } from './app/app.component';
  import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
  import { environment } from './environments/environment';
  
  bootstrapApplication(AppComponent, {
    providers: [
      // 仅在浏览器环境执行Firebase初始化
      typeof window !== 'undefined' ? provideFirebaseApp(() => initializeApp(environment.firebase)) : []
    ]
  }).catch(err => console.error(err));
  

• 校验依赖版本兼容性：Angular 15需搭配@angular/fire 7.x和firebase 9.x，更新命令：

  npm install @angular/fire@^7.6.1 firebase@^9.23.0 --save
  

额外排查步骤 #

• 查看firebase-debug.log的完整错误栈，定位具体出错的代码文件和行号
• 重新执行ng add @angular/fire，选择重新配置SSR与Hosting选项
• 更新Firebase CLI至最新版本：npm install -g firebase-tools

内容的提问来源于stack exchange，提问作者Shibaji Debnath