splunk splunk - 1 month ago 11
TypeScript Question

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

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.

enter image description here

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

Answer

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!

Comments