[英]AngularFirestore was already initialized on the [DEFAULT] Firebase App with different settings
So I have this small issue.所以我有这个小问题。
I have an Angular app and in the app.module.ts I initialize AngularFire我有一个 Angular 应用程序,在 app.module.ts 中我初始化了 AngularFire
imports:
[...
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFireFunctionsModule,
...]
Now I have multiple smaller modules, like for example LazyModule.现在我有多个较小的模块,例如 LazyModule。 This module is loaded in app-routing.module.ts like so:
这个模块像这样加载到 app-routing.module.ts 中:
{
path: 'lazyModule',
loadChildren: () => import('./modules/lazyModule/lazyModule.module').then(m => m.LazyModule)
},
Inside this LazyModule I do not import AngularFire again and I have a LazyComponent which requires the AngularFirestore在这个 LazyModule 中,我不再导入 AngularFire ,我有一个需要 AngularFirestore 的 LazyComponent
export class LazyComponent {
constructor(private firestore: AngularFirestore){}
}
For some reason, each time I navigate to this component, AngularFire tries to reinitialize and throws this error:出于某种原因,每次我导航到该组件时,AngularFire 都会尝试重新初始化并抛出此错误:
AngularFirestore was already initialized on the [DEFAULT] Firebase App with different settings.
Why does this happen?为什么会这样?
Whenever you import AngularFire, it apparently caches an object containing the current submodule's configuration in globalThis.ɵAngularfireInstanceCache
.每当您导入 AngularFire 时,它显然会在 globalThis.ɵAngularfireInstanceCache 中缓存一个包含当前子模块配置的
globalThis.ɵAngularfireInstanceCache
。 If you import the same submodule again, it checks the current instance's configuration against the cached configuration.如果您再次导入相同的子模块,它会根据缓存的配置检查当前实例的配置。 (The same submodule might be imported if multiple Angular child modules rely on AngularFire.) If the configurations don't match, then this error appears:
[AngularFire submodule] was already initialized on the [DEFAULT] Firebase App with different settings.
(如果多个 Angular 子模块依赖 AngularFire,可能会导入相同的子模块。)如果配置不匹配,则会出现此错误:
[AngularFire submodule] was already initialized on the [DEFAULT] Firebase App with different settings.
See this code .请参阅此代码。
I know that the original question says that AngularFire was loaded in app.module
, and the LazyModule
did not import AngularFire.我知道最初的问题是说 AngularFire 是在
app.module
中加载的,而LazyModule
没有导入 AngularFire。 A tip about that:关于这一点的提示:
Look for Angular services that depend on AngularFire.查找依赖于 AngularFire 的 Angular 服务。 Depending on where they are
providedIn
, they might be loaded in modules that otherwise don't involve AngularFire, and that are missing configuration defined elsewhere.根据
providedIn
它们的位置,它们可能会加载到不涉及 AngularFire 的模块中,并且缺少其他地方定义的配置。 This is very easy to miss.这是很容易错过的。
For example, I was configuring Auth's USE_EMULATOR
in a child module, and using Auth with no configuration in an Angular guard in the main module.例如,我在子模块中配置 Auth 的
USE_EMULATOR
,并在主模块的 Angular 守卫中使用 Auth 而没有配置。 The child module loaded with no errors, but the error was appearing for me upon navigation whenever the guard was involved.子模块加载没有错误,但每当涉及守卫时,导航时都会出现错误。 When the guard's dependencies were imported, a new instance of AngularFire Auth would be initialized, but was created with a different configuration than the one first cached for the child module.
当守卫的依赖项被导入时,一个新的 AngularFire Auth 实例将被初始化,但创建时使用的配置与第一个为子模块缓存的配置不同。
I fixed it by injecting all AngularFire configuration in the main module.我通过在主模块中注入所有 AngularFire 配置来修复它。 Child modules apparently inherit things injected at the main module level.
子模块显然继承了在主模块级别注入的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.