如何在同一Angular应用中配置多个Firebase项目

1. 整理 Firebase 配置信息 #

先把三个 Firebase 项目的配置信息收集好，每个项目的配置可从 Firebase 控制台「项目设置」→「添加应用」→「Web 应用」中获取，格式如下：

// 可放在 src/environments/environment.ts 或单独的配置文件里
export const firebaseConfigProjectA = {
  apiKey: "xxx",
  authDomain: "xxx.firebaseapp.com",
  projectId: "xxx",
  storageBucket: "xxx.appspot.com",
  messagingSenderId: "xxx",
  appId: "xxx"
};

export const firebaseConfigProjectB = { /* 第二个项目的配置内容 */ };
export const firebaseConfigProjectC = { /* 第三个项目的配置内容 */ };

2. 初始化多个 Firebase 应用实例 #

AngularFire 默认仅初始化一个默认应用，要同时对接多个项目，需手动初始化额外应用：
在 app.module.ts 中导入配置并完成初始化：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { firebaseConfigProjectA, firebaseConfigProjectB, firebaseConfigProjectC } from './services/firebase-config';

@NgModule({
  imports: [
    BrowserModule,
    // 第一个项目作为默认应用初始化
    AngularFireModule.initializeApp(firebaseConfigProjectA),
    // 另外两个项目需指定自定义应用名称
    AngularFireModule.initializeApp(firebaseConfigProjectB, 'projectB'),
    AngularFireModule.initializeApp(firebaseConfigProjectC, 'projectC'),
    // 导入需要用到的 Firebase 服务模块
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 注入并使用不同项目的服务实例 #

使用特定项目的服务时，需在注入阶段指定对应应用名称：

import { Component, Inject } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(
    // 默认应用（Project A）的服务实例
    private firestoreA: AngularFirestore,
    private authA: AngularFireAuth,
    // Project B 的服务实例，通过@Inject指定应用名
    @Inject('projectB') private firestoreB: AngularFirestore,
    @Inject('projectB') private authB: AngularFireAuth,
    // Project C 的服务实例
    @Inject('projectC') private firestoreC: AngularFirestore,
    @Inject('projectC') private authC: AngularFireAuth
  ) {}

  // 示例：获取 Project A 的数据
  getProjectAData() {
    this.firestoreA.collection('items').valueChanges().subscribe(data => {
      console.log('Project A 数据:', data);
    });
  }

  // 示例：登录 Project B 的账号
  loginProjectB(email: string, password: string) {
    this.authB.signInWithEmailAndPassword(email, password).then(user => {
      console.log('Project B 登录成功:', user);
    });
  }
}

4. 封装专属服务（可选） #

为避免每次注入都写@Inject，可以给每个项目单独封装服务，比如创建 project-b.service.ts：

import { Injectable, Inject } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Injectable({ providedIn: 'root' })
export class ProjectBService {
  constructor(
    @Inject('projectB') public firestore: AngularFirestore,
    @Inject('projectB') public auth: AngularFireAuth
  ) {}
}

之后在组件里直接注入ProjectBService即可，代码会更简洁。

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