How do I fix the Ionic Angular Standalone Firebase API called outside injection context error?

While migrating my Ionic Firebase project from NgModules to Standalone I receive the warning. Ionic Capacitor 7, Angular 20

*** ERROR: Firebase API called outside injection context: user *** Has anyone else had this issue. Most forums suggest turning off the warning, but I feel that would be dangerous to ignore.

app.module.ts // Works fine

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 {}


main.ts

// Firebase API called outside injection context error

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(), // provideIonicAngular({ mode: 'ios' }),
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'
}),
]
});


service.ts

// Service that calls on firebase NgModules no warning. Standalone Firebase API called outside injection context

constructor(private firestore: Firestore, private auth: Auth ) {
this.collectionRefUser = collection(this.firestore, 'users');
this.collectionRef = collection(this.firestore, 'tasks');
onAuthStateChanged(this.auth, (user) => {
if (user) {
const userQuery = query( this.collectionRefUser );
const userSub = collectionData(userQuery, { idField: 'id',});
this.tasksSub = userSub.subscribe( {
next: (userlist: any ) => {
const user = userlist.filter((x: any) => x.uid === this.auth.currentUser?.uid);
this.userCompany = user[0]['company'];
const tasksQuery = query( this.collectionRef, where('company', '==', user[0]['company']));
const collectionSub = collectionData(tasksQuery, { idField: 'id', }) as Observable<Task[]>;
this.tasksSub = collectionSub.subscribe((tasks) => { this.tasks.next(tasks) });
},
error: (error) => {
this.tasks.next([]);
this.tasksSub.unsubscribe();
}
});
} else {
this.tasks.next([]);
this.tasksSub.unsubscribe();
}
});
}

Continue reading...