Error: No Firebase App '[DEFAULT]' has been created

Question

I'm using Ionic2 and when I go to localhost:8100 (after doing ionic serve) I receive the error you can see in the following image.

app.component.ts looks like this:

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 {}

My system information:

Cordova CLI: 6.3.1

Ionic Framework Version: 2.0.0-rc.1

Ionic CLI Version: 2.1.1

Ionic App Lib Version: 2.1.1

Ionic App Scripts Version: 0.0.36

OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS

Node Version: v4.2.6

@Sasxa import *as firebase from 'firebase' gives me this warning in the terminal: rollup: Export 'initializeApp' is not defined by '/home/xxxx/Desktop/myApp/src/app/app.component.ts' and the same error of this question title: No Firebase App '[DEFAULT]' has been created, while if I do import firebase from 'firebase' the warning is not shown in terminal but the error persists in google chrome console. — splunk, Oct 18 '16 at 10:51
Don't see anything else that might cause problem. Is everything else working if you comment firebase stuff? — Sasxa, Oct 18 '16 at 11:02
Why don't use the [Angularfire](https://github.com/angular/angularfire2), the official wrapper for Firebase for Angular 2 — Fabio Antunes, Oct 18 '16 at 11:59

score 11 · Accepted Answer · answered Oct 21 '16 at 15:33

I had the same problem and perhaps I have a solution (works for me).

I've deleted firebase initialization from my app.components.ts completely and added it in app.module.ts BEFORE NGModule, e.g.:

    ...
    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({
    ...

Now I can use it in my Service (don't forget to include your service in 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. 
}

Hope this works for you!

But this does not working with Angular Universe. We receive issues like TypeError: firebase.initializeApp is not a function — Bharat, Mar 05 '20 at 16:54
@Bharat Try this: This post is 3,5 years old and the import structure changed, try if the following import solves your problem: import * as firebase from 'firebase/app'; — Ben, Mar 05 '20 at 20:39
Hey @Ben, I have already tried the above mentioned import but not working and gives the same response. — Bharat, Mar 06 '20 at 08:57

Wasim · Answer 2 · 2020-06-24T09:06:10.517

Initially I initialized firebase in my application in this way

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

Later it caused same issue then I added this before @NgModule

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

It works fine except this browser warning

Edit : Import in this way always to avoid warnings

import firebase from 'firebase/app';

Error: No Firebase App '[DEFAULT]' has been created

2 Answers2

Linked