迁移Ionic Firebase项目至独立组件架构时遭遇「Firebase API在注入上下文外调用」错误的解决方案求助
迁移Ionic Firebase项目至独立组件架构时遭遇「Firebase API在注入上下文外调用」错误的解决方案求助
最近我在把基于NgModules的Ionic Firebase项目迁移到Angular独立组件架构时,碰到了一个棘手的错误:Firebase API called outside injection context: user
我用的是Ionic Capacitor 7和Angular 20版本,不想像很多论坛说的那样直接关掉这个错误——总感觉忽略它会埋下潜在的稳定性风险。有没有其他开发者遇到过这个问题并找到合理的解决办法?
我的代码情况对比
1. 原NgModules架构下可正常运行的app.module.ts
import { NgModule, isDevMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { provideHttpClient ,HttpClient, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app'; import { getFirestore, provideFirestore } from '@angular/fire/firestore'; import { getStorage, provideStorage } from '@angular/fire/storage'; import { environment } from '../environments/environment'; import { Capacitor } from '@capacitor/core'; import { getAuth, indexedDBLocalPersistence, initializeAuth, provideAuth, } from '@angular/fire/auth'; import { ServiceWorkerModule } from '@angular/service-worker'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, provideFirebaseApp(() => initializeApp(environment.firebase)), provideAuth(() => { if (Capacitor.isNativePlatform()) { return initializeAuth(getApp(), { persistence: indexedDBLocalPersistence }); } else { return getAuth() } }), provideFirestore(() => getFirestore()), provideStorage(() => getStorage()), ServiceWorkerModule.register('ngsw-worker.js', { enabled: !isDevMode(), registrationStrategy: 'registerWhenStable:30000' }), ], providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], bootstrap: [AppComponent], }) export class AppModule {}
2. 迁移至独立组件架构后报错的main.ts
import { enableProdMode, importProvidersFrom } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router'; import { routes } from './app/app.routes'; import { AppComponent } from './app/app.component'; import { isDevMode } from '@angular/core'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app'; import { getFirestore, provideFirestore } from '@angular/fire/firestore'; import { getStorage, provideStorage } from '@angular/fire/storage'; import { environment } from './environments/environment'; import { Capacitor } from '@capacitor/core'; import { getAuth, indexedDBLocalPersistence, initializeAuth, provideAuth } from '@angular/fire/auth'; import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone'; import { provideServiceWorker } from '@angular/service-worker'; bootstrapApplication(AppComponent, { providers: [ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, provideIonicAngular(), provideRouter(routes, withPreloading(PreloadAllModules)), provideFirebaseApp(() => initializeApp(environment.firebase)), provideAuth(() => { if (Capacitor.isNativePlatform()) { return initializeAuth(getApp(), { persistence: indexedDBLocalPersistence }); } else { return getAuth() } }), provideFirestore(() => getFirestore()), provideStorage(() => getStorage()), provideHttpClient(withInterceptorsFromDi()), provideServiceWorker('ngsw-worker.js', { enabled: !isDevMode(), registrationStrategy: 'registerWhenStable:30000' }), ] });
我已尝试的排查方向
- 确认
provideFirebaseApp放在所有Firebase相关provider的最前面,保证App初始化优先级 - 检查项目中所有使用Firebase Auth的场景,均通过依赖注入
private auth: Auth获取服务,没有在构造函数外直接调用getAuth()
想请教大家的问题
有没有其他可能的原因导致这个注入上下文错误?或者有没有经过验证的解决方案可以尝试?非常感谢!
内容来源于stack exchange
相关产品推荐
相关产品推荐

