AngularFirestore 已經在 [DEFAULT] Firebase 應用程序上用不同的設置初始化

Question

所以我有這個小問題。

我有一個 Angular 應用程序，在 app.module.ts 中我初始化了 AngularFire

imports: 
[...
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireFunctionsModule,
...]

現在我有多個較小的模塊，例如 LazyModule。 這個模塊像這樣加載到 app-routing.module.ts 中：

{
    path: 'lazyModule',
    loadChildren: () => import('./modules/lazyModule/lazyModule.module').then(m => m.LazyModule)
},

在這個 LazyModule 中，我不再導入 AngularFire ，我有一個需要 AngularFirestore 的 LazyComponent

export class LazyComponent {
  constructor(private firestore: AngularFirestore){}
}

出於某種原因，每次我導航到該組件時，AngularFire 都會嘗試重新初始化並拋出此錯誤：

AngularFirestore was already initialized on the [DEFAULT] Firebase App with different settings.

為什么會這樣？

Answer 1

每當您導入 AngularFire 時，它顯然會在 globalThis.ɵAngularfireInstanceCache 中緩存一個包含當前子模塊配置的globalThis.ɵAngularfireInstanceCache 。 如果您再次導入相同的子模塊，它會根據緩存的配置檢查當前實例的配置。 （如果多個 Angular 子模塊依賴 AngularFire，可能會導入相同的子模塊。）如果配置不匹配，則會出現此錯誤： [AngularFire submodule] was already initialized on the [DEFAULT] Firebase App with different settings. 請參閱此代碼。

我知道最初的問題是說 AngularFire 是在app.module中加載的，而LazyModule沒有導入 AngularFire。 關於這一點的提示：

查找依賴於 AngularFire 的 Angular 服務。 根據providedIn它們的位置，它們可能會加載到不涉及 AngularFire 的模塊中，並且缺少其他地方定義的配置。 這是很容易錯過的。

例如，我在子模塊中配置 Auth 的USE_EMULATOR ，並在主模塊的 Angular 守衛中使用 Auth 而沒有配置。 子模塊加載沒有錯誤，但每當涉及守衛時，導航時都會出現錯誤。 當守衛的依賴項被導入時，一個新的 AngularFire Auth 實例將被初始化，但創建時使用的配置與第一個為子模塊緩存的配置不同。

我通過在主模塊中注入所有 AngularFire 配置來修復它。 子模塊顯然繼承了在主模塊級別注入的東西。