Anyone else still getting AngularFireModule has not been provided error?

[thatcatcancode]

I'm still getting this error on the latest rc release: Uncaught Error: AngularFireModule has not been provided at getSchedulers

Angular ^12.x.x, NgUniversal ^12.x.x, Firebase ^9.x.x, Angular Fire ^7.1.0-rc.4

Firestore is easy to configure using the angular fire 7 api 👍

The issues I have are specific to configuring Firebase Realtime Database (import { Database, ref } from '@angular/fire/database'). Do you see anything wrong with the below usage?

import { initializeApp } from '@angular/fire/app'
import { getDatabase } from '@angular/fire/database'

export function createFirebase(env: EnvironmentService) {
  const app = initializeApp(env.config.firebase)
  return getDatabase(app)
}

@NgModule({
  providers: [
    {
      provide: FIREBASE_APP_TOKEN,
      useFactory: createFirebase,
      deps: [EnvironmentService]
    },
    {
      provide: FIREBASE_LIVE_STREAM_SERVICE,
      useClass: FirebaseLiveStreamService,
      deps: [FIREBASE_APP_TOKEN, TransferState, EnvironmentService, LOGGER_SERVICE]
    }
  ]
})
export class FirebaseModule {
  static forRoot(): ModuleWithProviders<FirebaseModule> {
    return {
      ngModule: FirebaseModule
    }
  }
}

[pshields]

I've been seeing this as well and have been stumped about how to fix it.

[thatcatcancode]

are you also attempting to use getDatabase()?

[pshields]

No, just Firebase Authentication.

[besnikhaziri]

Hi there,
Can anyone help me with a problem I'm facing?
as soon as I write import { AngularFireModule } from 'angularfire2';, I get and immediate error like this:
error TS2694: Namespace '"node_modules/angularfire2/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

[Santoshah]

Maybe it is shifted to compat

import { AngularFireModule } from "@angular/fire/compat";

Try like this..

[sivanshkamat]

This is depricated and wont be used in angular 16, Do I have to use angularFireModule compulsorily?

[Albejr]

Possibly, you will solve it by passing the "app" as a parameter in the service's constructor.

I caught this problem when implementing a "Route Guard" (canLoad).

[pshields]

Thanks @Albejr, that resolved the issue in my case.

[thatcatcancode]

That did not solve my problem so I created this issue: #2999

[htrepo]

Thanks for the solution. Worked for me.

[davidev1902]

Thanks for the solution. Worked for me in Angular 18

[AlteriusOmega]

In my case it was because I was not using an auth service but doing the authentication directly in my login component and signup component. I created a separate service with "ng g s auth" and moved the auth there like so:

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

@Injectable({
  providedIn: 'root'
})

@Injectable()
export class AuthService {
  constructor(private auth: Auth) {

  }
  signUp(email: string, password: string) {
    return createUserWithEmailAndPassword(this.auth, email, password);
  }

  login(email: string, password: string) {
    return signInWithEmailAndPassword(this.auth, email, password);
  }
}

And for example my login component now looks like this with the getAuth removed:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';
// import { Firestore, collectionData, collection, addDoc } from '@angular/fire/firestore';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.less']
})
export class SignupComponent implements OnInit {

  constructor(private authService: AuthService) {}

  form!: FormGroup;

  ngOnInit(): void {
    this.form = new FormGroup({
      email: new FormControl(null),
      password: new FormControl(null)
    });
  }

  onSubmit() {
    console.log(`Form is `, this.form);

    const email = this.form.value.email;
    const password = this.form.value.password;

    console.log(`In onSubmit and email is ${email} and password is ${password}`);

    this.authService.signUp(email, password)
      .then((userCredentials) => {
        const user = userCredentials.user;
        console.log(`User successfully created: ${user}`);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(`Error signing up. Error code:${errorCode}, Error message:${errorMessage}`);
      });
  }
}

[rgant]

This is not correct:

@Injectable({
  providedIn: 'root'
})

@Injectable()

Don't do that twice.

[borisrose]

@rgant Have you found why my code does not work properly I gave you the code you wanted ( 54-line)

[rgant]

Try:

import { Injectable } from '@angular/core';
import { // eslint-disable-line @typescript-eslint/consistent-type-imports -- Auth is Angular Injected
  Auth,
  authState,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from '@angular/fire/auth';
import type { User, UserCredential } from '@angular/fire/auth';
import type { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AngularFireAuthService {
  public readonly authState$: Observable<User | null>;

  constructor(private readonly auth: Auth) {
    this.authState$ = authState(this.auth);
  }

  public async createUserWithEmailAndPassword(email: string, password: string): Promise<UserCredential> {
    return createUserWithEmailAndPassword(this.auth, email, password);
  }

  public async signInWithEmailAndPassword(email: string, password: string): Promise<UserCredential> {
    return signInWithEmailAndPassword(this.auth, email, password);
  }
}

[rgant]

@borisrose #3441 (comment)

[rgant]

And also:

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { FirebaseError } from '@angular/fire/app';
import type { UserCredential } from '@angular/fire/auth';

import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.less']
})
export class SignupComponent {
  public readonly theForm: FormGroup;

  constructor(private readonly authService: AuthService) {
    this.theForm = new FormGroup({
      email: new FormControl(null, [ Validators.required, Validators.email ]),
      password: new FormControl(null, [ Validators.required, Validators.minLength(6) ])
    });
  }

  onSubmit() {
    if (this.theForm.invalid) {
      throw new Error('onSubmit called with Invalid Form');
    }

    const { email, password } = this.theForm.value;

    this.authService.createUserWithEmailAndPassword(email, password)
      .then((userCredentials: UserCredential) => {
        const user = userCredentials.user;
        console.log(`User successfully created: ${user}`);
      })
      .catch((error: unknown): void => {
        if (error instanceof FirebaseError) {
          console.error(`Error signing up. Error code:${error.code}, Error message:${error.message}`);
        } else {
          console.error('Unknown Error', error);
        }
      });
  }
}