错误：没有Firebase应用程序＆＃39; [默认]＆＃39;已经被创造了

Question

我正在使用Ionic2，当我转到localhost：8100（执行ionic serve后）后，我收到了您可以在下图中看到的错误。

app.component.ts 如下所示：

import firebase from 'firebase';
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HomePage } from '../pages/home/home';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {


      var config = {
        apiKey: ".....",
        authDomain: "......",
        databaseURL: ".....",
        storageBucket: ".....",
        messagingSenderId: "......"
      };

      firebase.initializeApp(config);
      StatusBar.styleDefault();
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage 
  ],
  providers: []
})
export class AppModule {}

我的系统信息：

Cordova CLI：6.3.1

Ionic Framework版本：2.0.0-rc.1

Ionic CLI版本：2.1.1

Ionic App Lib版本：2.1.1

Ionic App Scripts版本：0.0.36

OS：分销商ID：Ubuntu描述：Ubuntu 16.04.1 LTS

节点版本：v4.2.6

Answer 1

我遇到了同样的问题，也许我有一个解决方案（对我有用）。

我已完全从app.components.ts中删除了firebase初始化，并在app.module.ts中添加了它，然后在NGModule之前，例如：

    ...
    import * as firebase from 'firebase';

    export const firebaseConfig = {
      apiKey: "",
      authDomain: ".firebaseapp.com",
      databaseURL: "https://.firebaseio.com",
      storageBucket: ".appspot.com",
      messagingSenderId: ""
    };

    firebase.initializeApp(firebaseConfig); //<-- where the magic happens

    @NgModule({
    ...

现在我可以在我的服务中使用它（不要忘记将您的服务包含在app.module.ts的提供者中：[yourService]'）

import firebase from 'firebase';

@Injectable()
export class yourService {
//Here you can use firebase.database(); or firebase.auth(); as you wish and it should work. 
}

希望这适合你！

Answer 2

最初，我以这种方式在应用程序中初始化了Firebase

imports: [
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    AngularFireMessagingModule,
    AngularFireModule.initializeApp(environment.firebase)
  ]

后来它引起了同样的问题，然后我在@NgModule之前添加了它

    import * as firebase from 'firebase';
    firebase.initializeApp(environment.firebase); 

除了此浏览器警告之外，它都可以正常工作

编辑：始终以这种方式导入以避免警告

import firebase from 'firebase/app';