Firebase not working properly on Angular 17

Question

When I try to go to my login page, it does not show anything and throws the error "NullInjectorError: No provider for InjectionToken angularfire2.app.options!" in the console.

This is my login TS file:

import { Component } from '@angular/core';
import { AuthService } from '../../../services/auth.service';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login-page',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './login-page.component.html',
  styleUrl: './login-page.component.css'
})
export class LoginPageComponent {
  email: string = '';
  password: string = '';

  constructor(private auth: AuthService) { }

  login() {
    if (this.email == '') {
      alert('Please enter email');
      return;
    }

    if (this.password == '') {
      alert('Please enter password');
      return;
    }

    this.auth.login(this.email, this.password);

    this.email = '';
    this.password = '';
  }
}

This is the AuthService file:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth'
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private fireauth: AngularFireAuth, private router: Router) { }

  //login method
  login(email: string, password: string) {
    this.fireauth.signInWithEmailAndPassword(email, password).then(() => {
      localStorage.setItem('token', 'true');
      this.router.navigate(['/home']);
    }, err => {
      alert(err.message);
      this.router.navigate(['/login']);
    })
  }
}

I ran the command "ng add @angular/fire", and since Angular 17 does not have modules, it configured the app.config.ts file as follows:

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), importProvidersFrom(provideFirebaseApp(() => initializeApp({ <FIREBASE CONFIG DATA> }))), importProvidersFrom(provideAuth(() => getAuth())), importProvidersFrom(provideFirestore(() => getFirestore()))]
};

The complete error is as follows:

main.ts:5 ERROR NullInjectorError: R3InjectorError(Standalone[_LoginPageComponent])[_AuthService -> _AuthService -> _AuthService -> _AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
    at NullInjector.get (core.mjs:5626:27)
    at R3Injector.get (core.mjs:6069:33)
    at R3Injector.get (core.mjs:6069:33)
    at injectInjectorOnly (core.mjs:911:40)
    at ɵɵinject (core.mjs:917:42)
    at Object.AngularFireAuth_Factory [as factory] (angular-fire-compat-auth.mjs:160:42)
    at core.mjs:6189:43
    at runInInjectorProfilerContext (core.mjs:867:9)
    at R3Injector.hydrate (core.mjs:6188:17)
    at R3Injector.get (core.mjs:6058:33)

The code itself does not throw any error. It is when I try to open my login page, it shows a blank screen with the error above in the console.

Thanks in advance.

I tried shuffling the imports between the compat files and the universal ones in order to get the app running, but it did not work. I'm not sure if Angular 17 is fully supported yet.

Answer 1

The compat @angular/fire/compat/ module is provided as a transition to migrate from Namespace SDK to Modular one. Hence always use Modular SDK for newer projects.

As per Angular Fire Auth Dependency Injection inject the Auth from @angular/fire/auth module instead from @angular/fire/compat/auth.

Your Auth service file will look something like as follows :

import { Injectable } from '@angular/core';
import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth'
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private auth: Auth, private router: Router) { }

  //login method
  login(email: string, password: string) {
    signInWithEmailAndPassword(this.auth, email, password).then(() => {
      localStorage.setItem('token', 'true');
      this.router.navigate(['/home']);
    }, err => {
      alert(err.message);
      this.router.navigate(['/login']);
    })
  }
}

If you really want to use old @angular/fire/compat module methods, make sure your configuration should be done as per Getting started with Firebase Authentication - compat