Uncaught (in promise): Error: No provider for AngularFireAuth - firebase

Question

We are tried login with google authentication using (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 are getting error :
Error: Uncaught (in promise): Error: No provider for AngularFireAuth!
Error: No provider for AngularFireAuth!
Please guide to us what working in our code .

Answer 1

A clarification of what #rmalviya suggested, I assume you are currently on Ionic version 3.x.x, for this version you have two ways of importing a native plugin and adding the respective providers for the plugin.
1) You could add the provider in your current page typescript file. like so:
import { AngularFireAuth } from 'angularfire2/auth';
...
#Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [AngularFireAuth]
})
2) Second method you could import it in your app.modules.ts and add the plugin into the providers
import { AngularFireAuth } from 'angularfire2/auth';
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AngularFireAuth
]

Answer 2

resolve here 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

If you're using the IonicPageModule system, then you'll need to import AngularFireAuth in your app.module.ts AND in your page.module.ts in the providers array.
app.module.ts:
#NgModule({
...
providers: [AngularFireAuth]
...
page.module.ts:
#NgModule({
declarations: [
SignupPage,
],
imports: [
IonicPageModule.forChild(SignupPage)
],
exports: [
SignupPage
],
providers: [
AngularFireAuth
]
})

Answer 4

I was facing the same issue but I managed to solved this by adding the following lines into my core modules.
CoreModule contains code that will be used to instantiate your app and load some core functionality.
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 { }