Firebase APIs outside of an Injection context

I keep getting error about,

Calling Firebase APIs outside of an Injection context may destabilize your application leading to subtle change-detection and hydration bugs.

I did properly set up the angular firebase integration although signIn, logIn working properly, but this error won't resolve and it makes the authentication delay at each reload.

Appconfig.ts -

const firebaseConfig = {
apiKey: "************",
authDomain: "************",
projectId: "************",
storageBucket: "************",
messagingSenderId: "************",
appId: "************"
}

export const appConfig: ApplicationConfig = {
providers:
[
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(),
provideFirebaseApp(() => initializeApp(firebaseConfig)),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore())
]
};

Service:

auth: Auth = inject(Auth)
fireStore: Firestore = inject(Firestore)
ngZone = inject(NgZone)

userSubject: BehaviorSubject = new BehaviorSubject(null)

private authSubscription;

constructor() {
this.authSubscription = this.auth.onAuthStateChanged(user => {
this.userSubject.next(user)
})
}

signUp(fullName: string, email: string, password: string, username: string, phone: string = '', address: string = '', pincode: string): Observable {
return this.ngZone.run(() => {

const promise = createUserWithEmailAndPassword(this.auth, email, password)
.then(response => {
const userCredentials = response.user;
if (userCredentials) {
return sendEmailVerification(userCredentials)
.then(() => {
// Update profile with username
return updateProfile(userCredentials, { displayName: username })
.then(() => {
// Save user details in Firestore
return this.saveUserDetails(response.user.uid, fullName, address, phone, pincode);
})
.catch(error => {
console.error("Error updating profile:", error);
throw new Error('Profile update failed');
});
})
.catch(error => {
console.error("Error sending email verification:", error);
throw new Error('Email verification failed');
});
} else {
throw new Error('User credentials not found');
}
})
.catch(error => {
console.error("Error during signup:", error);
throw error; // Propagate the error
});

return from(promise).pipe(
map(() => { }),
catchError(error => {
console.error("Error in signup:", error);
return throwError(() => new Error(error.message)); // Return an error observable
})
);
})

}

saveUserDetails(uid: string, fullName: string, address: string, phone: string, pincode: string): Promise {
const userRef = doc(this.fireStore, 'users', uid)

return setDoc(userRef, {
fullName: fullName,
address: address,
phone: phone,
pincode: pincode
}).then(() => {
console.log("User details saved in Firestore.");
}).catch((error) => {
console.error("Error saving user details in Firestore:", error);
throw error; // rethrow to propagate error in the stream
});
}

Component:

onSubmit() {
const rawForm = this.signUpForm.getRawValue();

this.loader.showLoader()
this.authService.signUp(rawForm.name,rawForm.email, rawForm.password, rawForm.username, rawForm.phone, rawForm.address, rawForm.pincode).subscribe((next) => {
this.router.navigateByUrl('/email-ver')
this.loader.hideLoader()
}, err => {
console.log('Some error occurred during signup', err);
this.loader.hideLoader()
})
}

Inizia dai provider Firebase in Appconfig.ts, poi esamina la sottoscrizione Auth e le chiamate Firebase nel Service, oltre al flusso di signup nel Component. Riproduci il comportamento del reload e del signup verificando quando compare l’avviso relativo all’injection context. Il lavoro è completato quando l’avviso e il ritardo nell’autenticazione sono risolti senza compromettere il signup o le scritture su Firestore.

Scritto dal modello di indicizzazione a partire dal testo della issue.