Readme sample code throws error: Runtime Error Uncaught (in promise): Error: No provider for AngularFireAuth!

Version info

Angular:
4.0.2

Firebase:
3.9.0

AngularFire:
4.0.0-rc.0

Other (e.g. Ionic/Cordova, Node, browser, operating system):
Cordova CLI: 7.0.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.10.1
Xcode version: Xcode 8.2.1 Build version 8C1002

How to reproduce these conditions

use below code in ionic v2 starter app:

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  template: `
  <div> {{ (user | async)?.uid }} </div>
  <button (click)="login()">Login</button>
  <button (click)="logout()">Logout</button>
  `,
})
export class AppComponent {

  user: Observable<firebase.User>;

  constructor(public afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
  }

  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

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

Steps to set up and reproduce

Follow the steps as mention in this repo readme document #5. User authentication

Debug output

** Errors in the JavaScript console **

Runtime Error
Uncaught (in promise): Error: No provider for AngularFireAuth!

Same error occurs when used with this Using AngularFire2 with Ionic 2 readme document

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
// Do not import from 'firebase' as you'll lose the tree shaking benefits
import * as firebase from 'firebase/app';

import { Platform } from 'ionic-angular';
import { Facebook } from 'ionic-native';

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

  constructor(public afAuth: AngularFireAuth) {
    this.authState = afAuth.authState;
    afAuth.subscribe((user: firebase.User) => {
      this.currentUser = user;
    });
  }

  get authenticated(): boolean {
    return this.currentUser !== null;
  }

  signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
    if (this.platform.is('cordova')) {
      return Facebook.login(['email', 'public_profile']).then(res => {
        const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
        return this.afAuth.auth.signInWithCredential(facebookCredential);
      });
    } else {
      return this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
    }

  }

  signOut(): void {
    this.afAuth.signOut();
  }

  displayName(): string {
    if (this.currentUser !== null) {
      return this.currentUser.facebook.displayName;
    } else {
      return '';
    }
  }
}

Please review looks like the document is missing some imports/exports.

[markgoho]

I believe you need to import AngularFireAuthModule in the module that that component is in.

If you go through Step 1, which is setup and installation, you'll have imported it. But perhaps if you just jump to step 5 and don't realize you need it, you'd get that error.

@markgoho - Adding AngularFireAuthModule to Imports throws error. Please try yourself.

[davideast]

@sunilkconsultant Can you show your @NgModule code?

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { AngularFireModule } from 'angularfire2';

import { AngularFireAuth } from 'angularfire2/auth';

import { AngularFireDatabaseModule } from 'angularfire2/database';



export const firebaseConfig = {
   
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule, // imports firebase/database, only needed for database features
    AngularFireAuthModule // imports firebase/auth, only needed for auth features
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

After import as below:

imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule, // imports firebase/database, only needed for database features
AngularFireAuthModule // imports firebase/auth, only needed for auth features
],

Throws error:

Typescript Error
Cannot find name 'AngularFireAuthModule'.

Stack
ReferenceError: AngularFireAuthModule is not defined
at Object. (http://localhost:8100/build/main.js:76376:13)
at webpack_require (http://localhost:8100/build/main.js:48:30)
at Object. (http://localhost:8100/build/main.js:114428:70)
at webpack_require (http://localhost:8100/build/main.js:48:30)
at http://localhost:8100/build/main.js:140:18
at http://localhost:8100/build/main.js:143:10

[markgoho]

You need to add import { AngularFireAuthModule } from 'angularfire2/auth' to your @NgModule code

@markgoho thanks! this worked, closing it. I hope this is mentioned in the document just for others reference?

[evanjmg]

Please document this before closing

[davideast]

@evanjmg It is documented: https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md#adding-the-firebase-database-and-auth-modules