Firebase APIs outside of an Injection context

Commencez par les providers Firebase dans Appconfig.ts, puis examinez la souscription Auth et les appels Firebase dans le Service, ainsi que le flux de signup dans le Component. Reproduisez le comportement lors du rechargement et du signup tout en vérifiant quand l’avertissement d’injection context apparaît. Le travail est terminé lorsque l’avertissement et le délai d’authentification sont résolus sans casser le signup ni les écritures Firestore.

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()
})

}