firebase.auth().onAuthStateChanged 没有 AngularFire 的提供者答案

【问题标题】：firebase.auth().onAuthStateChanged No provider for AngularFirefirebase.auth().onAuthStateChanged 没有 AngularFire 的提供者
【发布时间】：2017-05-02 07:04:15
【问题描述】：

我得到了错误

未捕获（承诺）：错误：没有 AngularFire 的提供者！

当我尝试拨打firebase.auth().onAuthStateChanged 时。不知道为什么会这样。请帮忙。

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();
    });
  }
}

【问题讨论】：

可以添加app.module.ts吗？
我需要在应用模块中添加什么？
您的项目是否包含在 app.module.ts 中注入的 angularfire？您可以按照上面@suraj 的要求粘贴此文件的内容

标签： firebase ionic2 firebase-authentication angularfire

【解决方案1】：

您的配置设置不正确。您应该在 app.module.ts 中包含此代码，而不是在组件中。

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);

这是您应该拥有上述代码的地方。如果您没有设置提供程序，您将不断收到错误消息。

【讨论】：