No provider for InjectionToken angularfire2.app.options [duplicate]

Question

Recently I started to learn to use the concept of Firebase in combination with angular. As a start, I try to make the login process work. Currently, I get an annoying error when I try to navigate to the login page, and I cannot figure out what is causing the error. The error I get is:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options]: StaticInjectorError(Platform: core)[AngularFireAuth -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for InjectionToken angularfire2.app.options!

What do I have to do to resolve this error? Also, I see a lot of code using angularfire2 instead of @angular/fire. What is the difference between these 2 and which should I use?

this is the code I have so far:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from 'environments/environment';
import * as firebase from 'firebase/app';

import { AppComponent } from './app.component';
import { FIREBASE_SERVICES } from './core/firebase/services';
import { AUTHENTICATION_GUARDS } from './features/authentication/guards';
import { AUTHENTICATON_ROUTES } from './features/authentication/authentication.route';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { DashboardComponent } from './features/dashboard/dashboard/dashboard.component';
import { LogInComponent } from './features/authentication/login/login.component';
import { DASHBOARD_ROUTES } from './features/dashboard/dashboard.route';

firebase.initializeApp(environment.firebase);
 
@NgModule({
    declarations: [
        AppComponent,
        DashboardComponent,
        LogInComponent
    ],
    imports: [
        AngularFireModule,
        AngularFireDatabaseModule,
        AngularFireAuthModule,
        BrowserModule,
        RouterModule,
        FormsModule, 
        ReactiveFormsModule,
        RouterModule.forRoot(AUTHENTICATON_ROUTES),
        RouterModule.forRoot(DASHBOARD_ROUTES)
    ],
    providers: [
        FIREBASE_SERVICES, 
        AUTHENTICATION_GUARDS
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor() {
        console.log("App module created");
    }
}

login.component.ts

import { Component } from '@angular/core';
import { Credentials } from '@app/core/firebase/models';
import { AuthenticationService } from '@app/core/firebase/services/authentication.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-log-in',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.less']
})
export class LogInComponent {
    emailaddress: string = '';
    password: string = ''; 

    constructor(private readonly _authenticationService: AuthenticationService,
        private readonly _router: Router) {
    }

    login() {
        console.log('log in clicked');

        const credentials = new Credentials(this.emailaddress, this.password);
        
        this._authenticationService.login(credentials)
            .then(
                () => this._router.navigate['/dashboard'],
                error => {
                    console.log(error);
                    alert(error.message);
                }
            );
    }
}

authentication.service.ts

import { Injectable } from '@angular/core';
import { isNullOrUndefined } from 'util';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';

import { Credentials } from '@app/core/firebase/models';

@Injectable()
export class AuthenticationService {

    constructor(private readonly _angularFireAuthentication: AngularFireAuth) {
        console.log("Authentication Service created");
    }

    login(credentials: Credentials) {
        return new Promise((resolve, reject) => {
            this._angularFireAuthentication.auth
                .signInWithEmailAndPassword(credentials.emailaddress, credentials.password)
                .then(
                    result => resolve(result),
                    error => reject(error)
                );
        });
    }

    logout() {
        return new Promise((resolve, reject) => {
            if (this.isUserLoggedIn()) {
                this._angularFireAuthentication.auth.signOut();
                resolve();
            }
            else {
                reject();
            }
        });
    }

    private isUserLoggedIn(): boolean {
        return !isNullOrUndefined(firebase.auth().currentUser);
    }
}

dependencies section in pacakge.json

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26",
    "firebase": "^5.5.5",
    "@angular/fire": "^5.0.2"
  },

Intwine

Can you try removing your line firebase.initializeApp(environment.firebase); and remove the import of firebase and then where you import AngularFireModule change that to AngularFireModule.initializeApp(environment.firebase) some other details here - github.com/angular/angularfire2/blob/master/docs/… – Foretopgallant

@JackWoodwardI did that way of initializing before I replaced it with the firebase.initializeApp but then I got this error: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). – Intwine

You have use firebase.auth().signInWithCredentials.... if you are initializing your app just with firebase.initializeApp and your import is import firebase from 'firebase/app'; – Hydrolytic

Answer 1

You're not initializing your app correctly. When you import the AngularFireModule, you need to initialize there:

imports: [
    AngularFireModule.initializeApp(yourFirebaseConfig),
    AngularFireDatabaseModule,
    // ... the rest
],

More in the docs.

It used to be called angularfire2 but on the v5 release they got moved to the @angular scope. From here-on, it's @angular/fire, not angularfire2.

Pothole

I would like to, but the firebase.initializeApp was a fix for this error: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). Before I did the firebase.initializeApp call, I was doing the AngularFireModule.initializeApp like you suggested and like I said, I got the error I mentioned. – Intwine

@Intwine It looks like you got pretty far with adding Firebase deps throughout before this error got raised, I would recommend removing pieces and starting from the baseline. Additionally, there's really no reason to use anything imported from firebase when using @angular/fire, such as your auth() call in isUserLoggedIn. Use the auth methods that come with the @angular/fire package. – Pothole

Yes, using the firebase was actually causing the issues I was having. Because it was firebase who wasn't initialized yet. Initializing AngularFireModule doesn't make firebase to be initialized as well, and when I started to use them, I got the no firebase was created error. Replacing all the firebase imports and usages with the AngularFireAuth fixed my issues. – Intwine

I need firebase.auth.GoogleAuthProvider, any solutions without importing firebase?. – Rivy

You need to import something NF. github.com/firebase/angularfire/issues/… In the future open a new question if you're having issues. – Pothole

The angular fire base cli does not add -> import { AngularFireModule } from '@angular/fire/compat'; in the main module file i.e app module. Add it and also add to imports -> AngularFireModule.initializeApp(environment.firebase), – Cathleencathlene