错误：未创建Firebase应用程序“[DEFAULT]”

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命令行界面版本：6.3.1

Ionic框架版本：2.0.0-rc.1

Ionic命令行界面版本：2.1.1

Ionic应用程序库版本：2.1.1

Ionic应用程序脚本版本：0.0.36

操作系统: 发行版标识符: Ubuntu 描述: Ubuntu 16.04.1 LTS

Node.js版本: v4.2.6

- splunk

---

尝试：import * as firebase from 'firebase'; - Sasxa

@Sasxa 导入 *as firebase from 'firebase' 代码会在终端中显示如下警告：rollup: Export 'initializeApp' is not defined by '/home/xxxx/Desktop/myApp/src/app/app.component.ts'，同时在Google Chrome控制台中出现同名错误：No Firebase App '[DEFAULT]' has been created。但是，如果我使用 import firebase from 'firebase' 的方式导入，则终端不会显示警告信息，但在控制台上的错误依然存在。 - splunk

你使用的 Firebase 版本是什么？ - Sasxa

从我的package.json文件中： "firebase": "^3.5.0" - splunk

你看不到其他可能会引起问题的东西吗？如果你注释掉 Firebase 的内容，其他所有功能都能正常工作吗？ - Sasxa

为什么不使用 Angularfire，这是 Angular 2 官方的 Firebase 包装器？ - Fabio Antunes

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 中将你的服务添加到 'providers: [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. 
}

希望这对你有用！

- Ben

---

但是这在 Angular Universe 上不起作用。我们会收到类似 TypeError: firebase.initializeApp 不是函数的问题。 - Bharat

@Bharat 试一下这个：这篇文章已经是3.5年前的了，导入结构已经改变，尝试一下以下导入是否能够解决你的问题：import * as firebase from 'firebase/app'; - Ben

嘿@Ben， 我已经尝试了上述提到的导入，但不起作用并且给出相同的响应。 - Bharat

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

- Wasim