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

Created on 8 May 2017 · 9Comments · Source: angular/angularfire

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.

Source

ghost

Most helpful comment

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

markgoho on 8 May 2017

👍4

All 9 comments

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 on 8 May 2017

👍1

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

ghost on 8 May 2017

@sunilkconsultant Can you show your @NgModule code?

davideast on 8 May 2017

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 {}

ghost on 8 May 2017

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