No provider for InjectionToken FirebaseAppConfigToken! Angular 4 , AngularFire2

Question

I am trying to build an app using the angular 4 and angularFire 2. My anuglar 4 app configuration is.

@angular/cli: 1.1.0
node: 6.10.3
os: win32 x64
@angular/animations: 4.1.2
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/compiler-cli: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/platform-server: 4.1.2
@angular/router: 4.1.2

Application compiles without any issues and load all other pages except the page which has AngularFireAuth reference. When click on a page which uses AngularFireAuth breaks and below error is logged in console.

node_modules/@angular/core//bundles/core.umd.js:1091 ERROR Error: Uncaught (in promise): Error: No provider for InjectionToken FirebaseAppConfigToken!
Error: No provider for InjectionToken FirebaseAppConfigToken!
    at injectionError (node_modules/@angular/core//bundles/core.umd.js:1238)
    at noProviderError (node_modules/@angular/core//bundles/core.umd.js:1276)
    at ReflectiveInjector_._throwOrNull (node_modules/@angular/core//bundles/core.umd.js:2777)
    at ReflectiveInjector_._getByKeyDefault (node_modules/@angular/core//bundles/core.umd.js:2816)
    at ReflectiveInjector_._getByKey (node_modules/@angular/core//bundles/core.umd.js:2748)
    at ReflectiveInjector_.get (node_modules/@angular/core//bundles/core.umd.js:2617)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:164)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:174)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:219)
    at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:395)
    at injectionError (node_modules/@angular/core//bundles/core.umd.js:1238)
    at noProviderError (node_modules/@angular/core//bundles/core.umd.js:1276)
    at ReflectiveInjector_._throwOrNull (node_modules/@angular/core//bundles/core.umd.js:2777)
    at ReflectiveInjector_._getByKeyDefault (node_modules/@angular/core//bundles/core.umd.js:2816)
    at ReflectiveInjector_._getByKey (node_modules/@angular/core//bundles/core.umd.js:2748)
    at ReflectiveInjector_.get (node_modules/@angular/core//bundles/core.umd.js:2617)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:164)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:174)
    at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:219)
    at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:395)
    at resolvePromise (zone.js:757)
    at resolvePromise (zone.js:728)
    at zone.js:805
    at ZoneDelegate.invokeTask (zone.js:414)
    at Object.onInvokeTask (node_modules/@angular/core//bundles/core.umd.js:4126)
    at ZoneDelegate.invokeTask (zone.js:413)
    at Zone.runTask (zone.js:181)
    at drainMicroTaskQueue (zone.js:574)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:480)

I am not finding any clue about the issue. Any help is much appreciated!.

Service:

import * as firebase from 'firebase/app';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable'; 

@Injectable()
export class AdminService   {  
    private authUser:any;
    private authState:any;
    private loggedInUser:any;
    userLoggedin:boolean=false;
       constructor(public afAuth: AngularFireAuth) { 
             this.afAuth.authState.subscribe((auth) => {
              this.authState = auth;
              console.log(this.authState);
            });
    }


    login(loginEmail:string,loginPassword:string){
        this.afAuth.auth.signInWithEmailAndPassword(loginEmail,loginPassword)
        .catch(function(error){
            alert(" unable to login.Try again");
        });
    }
}

Thank you

Answer 1

You need to add : AngularFireModule.initializeApp(environment.firebase), for proper configuration of firebase with your project in AppModule.

Answer 2

Please make sure you got your Firebase config right and that you passed in correctly in your module so your app.module.ts looks like this:

 import { AngularFireModule } from 'angularfire2';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';

    export const firebaseConfig = {
    //fill this data with the data you get from the firebase console
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: ",
    messagingSenderId: ""
}
    @NgModule({
      imports: [
        BrowserModule,
        AngularFireModule.initializeApp(firebaseConfig)
      ],
      declarations: [ AppComponent ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule {}

EDIT: here is a service for signup, login and logout using angularfire2

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {
  user: Observable<firebase.User>;

  constructor(private firebaseAuth: AngularFireAuth) {
    this.user = firebaseAuth.authState;
  }

  signup(email: string, password: string) {
    this.firebaseAuth
      .auth
      .createUserWithEmailAndPassword(email, password)
      .then(value => {
        console.log('Success!', value);
      })
      .catch(err => {
        console.log('Something went wrong:',err.message);
      });    
  }

  login(email: string, password: string) {
    this.firebaseAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        console.log('Nice, it worked!');
      })
      .catch(err => {
        console.log('Something went wrong:',err.message);
      });
  }

  logout() {
    this.firebaseAuth
      .auth
      .signOut();
  }

}