Unprepared (in promise): Error: no provider for AngularFireAuth

Question

We tried login using Google Authentication (Firebase / ionic2 / angularjs2). Our code

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
   user: Observable<firebase.User>;
  constructor(public navCtrl: NavController,public afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
  }
  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

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

but we get the error:

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

Please tell us what works in our code.

Answer 1

To clarify what @rmalviya suggested, I assume that you are currently on Ionic version 3.xx, for this version you have two ways to import the native plugin and add the appropriate providers for the plugin.

1) You can add a provider to the current typescript page. So:

  import { AngularFireAuth } from 'angularfire2/auth';

  ...

  @Component({
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [AngularFireAuth]
  })

2) , app.modules.ts

 import { AngularFireAuth } from 'angularfire2/auth';

 ...

 providers: [
   StatusBar,
   SplashScreen,
   {provide: ErrorHandler, useClass: IonicErrorHandler},
   AngularFireAuth
 ]

Answer 2

https://github.com/iglewski/Annotator/issues/3

app.component.spec.ts:

import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
import { AngularFireAuth, AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { firebaseConfig } from './app.module';
describe('AppComponent', () => { 
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        AngularFireModule.initializeApp(firebaseConfig), //ajout
        AngularFireAuthModule, //ajout
        AngularFireDatabaseModule //ajout
      ],
    }).compileComponents();

  })); 

Answer 3

IonicPageModule, AngularFireAuth app.module.ts page.module.ts .

app.module.ts:

@NgModule({
... 
 providers: [AngularFireAuth]
... 

page.module.ts:

@NgModule({
  declarations: [
    SignupPage,
  ],
  imports: [
    IonicPageModule.forChild(SignupPage)
  ],
  exports: [
    SignupPage
  ],
  providers: [
    AngularFireAuth
  ]
})

Answer 4

, , .

CoreModule , .

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* 3e. Import the angularfire2 thingy. */
**import {AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFireAuthModule } from 'angularfire2/auth';**

import { AuthModule } from '../auth/auth.module';
import { AuthService } from '../core/auth.service';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,

    /* To allow the db to talk to the form. */
    **AuthModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
    AngularFirestoreModule,**
  ],
  exports: [],
  providers: [
    AuthService,
  ]
})
export class CoreModule { }