如何将Angular Web应用的实时数据库切换至新Firebase项目

背景 #

• 基于Firebase创建的Angular Web应用，已绑定自定义域名，用户输入数据保存至Realtime Database。
• 因旧项目Realtime Database存在安全风险，创建新项目作为生产环境，将域名从旧项目解绑后绑定到新项目。

核心问题 #

用户与网站交互时，数据仍被发送至旧项目的Realtime Database，而非新项目。

已尝试操作 #

• 排查Web应用的html和src文件，定位Firebase配置位置
• 在src\app文件夹中找到3个含Firebase配置的TypeScript文件，替换为新项目的配置（示例配置如下）
• 将修改后的代码重新部署至新Firebase项目

新项目配置示例 #

const firebaseConfig = 
{  
  apiKey: "API key xxxxxxxxxxxx",
  authDomain: "websitexxxxxx.firebaseapp.com",  
  databaseURL: "https://websitexxxxxx-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "websitexxxxxx",
  storageBucket: "websitexxxxxx.appspot.com",
  messagingSenderId: "00000000000",
  appId: "1:0000000:web:xyxyxyxyxyx",
  measurementId: "G-xyxyxyx"
};

按以下步骤逐一排查：

1. 检查环境配置文件
   Angular项目通常会将环境配置分开存放，比如src/environments/environment.ts（开发环境）和src/environments/environment.prod.ts（生产环境）。确认生产环境的配置也已替换为新项目的Firebase信息，部署时使用的是生产环境构建命令（如ng build --prod）。

2. 清理构建与部署缓存

   • 本地构建前删除dist文件夹，或使用ng build --prod --delete-output-path强制清理旧构建文件。
   • 部署到Firebase前，执行firebase deploy --only hosting --force强制覆盖旧部署内容，避免Firebase的部署缓存。

3. 清除客户端与CDN缓存

   • 访问网站时按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新浏览器，清除本地缓存。
   • 如果域名使用了CDN服务，登录CDN后台手动清除缓存。

4. 确认Firebase部署目标

   • 执行firebase projects:list查看当前关联的项目，确保使用firebase use <新项目ID>切换到正确的生产项目后再部署。

5. 全局搜索旧数据库痕迹
   在项目代码中全局搜索旧项目的databaseURL字符串，检查是否有硬编码的旧数据库地址（比如在服务类中直接调用firebase.database('旧URL')），而非引用配置变量。

6. 验证Firebase初始化配置
   打开浏览器控制台，执行firebase.app().options.databaseURL，查看返回的地址是否为新项目的Realtime Database地址。如果不是，说明部署的代码中配置仍未更新，需重新检查构建和部署流程。

7. 检查AngularFire模块初始化
   确认app.module.ts中初始化AngularFire时使用的是新配置：

   import { AngularFireModule } from '@angular/fire/compat';
   import { firebaseConfig } from './path-to-your-config';
   
   @NgModule({
     imports: [
       AngularFireModule.initializeApp(firebaseConfig)
     ]
   })
   export class AppModule { }
   

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