firebase.auth().onAuthStateChanged No provider for AngularFire - firebase

Question

I get the error
Uncaught (in promise): Error: No provider for AngularFire!
When I tried to call firebase.auth().onAuthStateChanged.
Don't know why this happens. Please help.
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { Login } from '../pages/login/login';
import firebase from 'firebase';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = Login;
isAuthenticated = false;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
firebase.initializeApp({
apiKey: "AIzaSyC94rD8wXG0aRLTcG29qVGw8CFfvCK7XVQ",
authDomain: "myfirstfirebaseproject-6da6c.firebaseapp.com",
});
firebase.auth().onAuthStateChanged(user => {
if (user) {
this.isAuthenticated = true;
this.rootPage = HomePage;
} else {
this.isAuthenticated = false;
this.rootPage = Login;
}
});
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}

Answer 1

Your config isn't set up properly. You should have this code in your app.module.ts, not in your component.
import {
AngularFireModule,
AuthMethods,
AuthProviders
} from 'angularfire2';
...
#NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [
AngularFireModule.initializeApp({
apiKey: '<some-key>',
authDomain: '<some-project-authdomain>',
databaseURL: '<some-database-URL>',
storageBucket: '<some-storage-bucket>'
}, {
method: AuthMethods.Password,
provider: AuthProviders.Password
}),
BrowserModule,
...
]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
This is where you should have the above code. If you don't have the provider set, you'll keep getting the error.