No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().

[maxmumford]

After upgrading to 2.0.0-beta.5 and firebase 3.4.0, I can access data through the angularfire2 api without a problem, but when trying to access the firebase object with the following:

firebase.auth().currentUser.updateProfile({...})

I get the following error:

No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().

This of course indicates that the firebase connection hasn't been initialised, however I am able access data through the angularfire2 api, so I don't know why this would fail...

my package.json:

{
  "name": "app",
  "version": "0.1.0",
  "scripts": {
    "typings-install": "typings install",
    "postinstall": "npm run typings-install",
    "build": "webpack --inline --colors --progress --display-error-details --display-cached",
    "watch": "npm run build -- --watch",
    "server": "node app.js",
    "dev": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 8000 --host 0.0.0.0 --content-base dist",
    "start": "npm run build; npm run server;"
  },
  "engines": {
    "node": "5.10.1",
    "npm": "3.10.7"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0-rc.3",
    "@angular/upgrade": "2.0.0",
    "@types/request": "0.0.30",
    "angular2-google-maps": "^0.15.0",
    "angular2-materialize": "^5.1.0",
    "angular2-template-loader": "^0.5.0",
    "angularfire2": "^2.0.0-beta.5",
    "awesome-typescript-loader": "^2.2.1",
    "copy-webpack-plugin": "^3.0.1",
    "core-js": "^2.4.0",
    "express": "^4.14.0",
    "firebase": "^3.4.0",
    "geofire": "^4.1.1",
    "hammerjs": "^2.0.8",
    "html-webpack-plugin": "^2.22.0",
    "ie-shim": "^0.1.0",
    "materialize-css": "^0.97.7",
    "moment": "^2.15.0",
    "morgan": "^1.7.0",
    "ng2-file-upload": "^1.0.3",
    "node-sass": "^3.8.0",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "sass-loader": "^4.0.0",
    "typescript": "^2.0.0",
    "typings": "^1.0.5",
    "webcomponents.js": "^0.7.22",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1",
    "webpack-merge": "^0.14.1",
    "zone.js": "0.6.21"
  },
  "devDependencies": {}
}

and in app.module.ts I initialise the af2 connection with:

AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfigWgs),

any idea what's causing this?

[mukesh51]

@maxmumford Adding this statement should get you a reference to firebase object.

import * as firebase from 'firebase'

[maxmumford]

Thanks for your suggestion but I am already importing firebase with:

import * as firebase from "firebase";

The problem is with firebase not being initialised, not with it not being referenced.

[davideast]

@maxmumford Can you show all of your app.module.ts?

[mukesh51]

and even a plnkr will be helpful.

[maxmumford]

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule, FormBuilder } from "@angular/forms";
import { routing, appRoutingProviders } from './app.routing';

// ui
import "materialize-css";
import "angular2-materialize";
import { MaterializeDirective } from "angular2-materialize";
import { AgmCoreModule } from 'angular2-google-maps/core';
import { FileSelectDirective } from 'ng2-file-upload';

// services
import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';
import { FirebaseService, ConfigService, GeoFireService, LayoutService, 
  EmailService, GeolocationService, ToastService, DateService } from './shared';
// ... redacted

// components
import { AppComponent }  from './app.component';
// ... redacted

// pipes
import { CountryCodeToNamePipe, DateFriendlyPipe, DistancePipe } from "./pipes";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  storageBucket: "...",
}

const firebaseAuthConfigWgs = {
  provider: AuthProviders.Password,
  method: AuthMethods.Password,
  remember: 'default',
  scope: ['email', 'profile']
}

const googleMapsConfig = { 
  apiKey: '...', 
  libraries: [
    'places'
  ] 
}

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfigWgs),
    FormsModule,
    ReactiveFormsModule,
    routing,
    AgmCoreModule.forRoot(googleMapsConfig)
  ],
  declarations: [
    // directives
    MaterializeDirective,
    FileSelectDirective,

    // components
    AppComponent,
    // ... redacted

    // pipes
    CountryCodeToNamePipe,
    DateFriendlyPipe,
    DistancePipe
  ],
  providers: [
    // utils / angular
    appRoutingProviders,
    Title,
    FormBuilder,

    // app
    ConfigService,
    LayoutService,
    ToastService,
    DateService,

    // data
    FirebaseService,
    GeoFireService,
    GeolocationService,
    EmailService,
    // ..redacted
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

I tried reproducing with a plnkr but everything worked as expected:

https://embed.plnkr.co/o1ImoxSRspawmTxdQ7Hm/

if I WAS able to reproduce the problem on that plnkr, these would be the steps:

• Enter an email and password
• Click create user
• Click "Update profile with random display name"
• Watch as user $key changes to a shorter, random string

If I were to run a similar example in my app, the error message (in my first post in this thread) would show when updateProfile is called...

Let me know if you need any more help, I'll provide what I can, but have been struggling for a few hours now to try and reproduce this issue outside of my app...

Thanks
Max.

[mukesh51]

@maxmumford I tried recreating this problem locally, but everything works fine.
Hopefully @davideast should provide some steer.

Also you should see the recommended way to get current user. I modified the code slightly
https://firebase.google.com/docs/auth/web/manage-users#get_the_currently_signed-in_user

[maxmumford]

Thanks @mukesh51. Usually to get the user's auth state I subscribe to the angularfire auth state change event. I only access the firebase.auth().currentUser object out of necessity for calling updateProfile on it.

Hoping @davideast can shed some light on things...

[mukesh51]

@maxmumford Just a thought. If everything works as expected on plnkr as well as on my local instance,is it something you would like to try installing everything from scratch Install & Setup to ensure nothing is missing.

[maxmumford]

I've started a new project to try to reproduce it locally, I'll spend some
more time tomorrow to get that set up.

On Sat, 24 Sep 2016, 10:29 Mukesh G Chandnani, notifications@github.com
wrote:

@maxmumford https://github.com/maxmumford Just a thought. If everything
works as expected on plnkr as well as on my local instance,is it something
you would like to try installing everything from scratch Install & Setup
https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md
to ensure nothing is missing.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#556 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADnziHOSTPaESVMnG-eocuJoegiORsowks5qtO1lgaJpZM4KFCkl
.

Max Mumford
07800 870 719
https://www.Cocept.io - Better Business Tools to Boost your Bottom Line

[FoodBuster]

@maxmumford: So this works for me (though it's not ideal): Just add "firebase.initializeApp(environment.firebaseConfig)" outside @NgModule in app.module, like this:

`
...
import { AngularFireModule } from 'angularfire2/';
import * as firebase from 'firebase';

firebase.initializeApp(environment.firebaseConfig);

@NgModule({
declarations: [ ... ],
imports: [
...
AngularFireModule.initializeApp(environment.firebaseConfig),
],
providers: [ ... ],
entryComponents: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
`

Again, not ideal, and not sure of the unintended consequences of initializing each of firebase and AF separately. But at least my app is working again.

[maxmumford]

Thanks @FoodBuster, I tried your solution and curiously I get the following during the module bootstrap (after manually initing firebase):

Error: Firebase App named '[DEFAULT]' already exists

This I suppose indicates that some time after the module bootstrap process, the firebase connection is lost or modified.

One thing I have been able to rule out is GeoFire - I removed all traces of it from my app and the same error still appears.

I'll continue trying to reproduce this issue today...

[maxmumford]

I've managed to reproduce this issue in a new, bare project locally, here is a repo with the code:

https://github.com/maxmumford/no-firebase-app-default

[5amfung]

I also have the same error No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp(). after updating to beta 5 as @maxmumford pointed out. However, I didn't have the same issue with beta 4.

I also initialize like the following:

@NgModule({
    imports: [
        AngularFireModule.initializeApp(environment.firebase),
        BrowserModule,
        FormsModule,
        RouterModule,
        routing,
    ],
    ...
})

import * as firebase from 'firebase';

[maxmumford]

EDIT: THIS IS NO LONGER THE RECOMMENDED SOLUTION - SEE COMMENT:

#556 (comment)

As @JimTheMan points out in #585 the solution is to initialise the firebase SDK separately:

firebase.initializeApp(firebaseConfig);

For anyone getting this error:

Error: Firebase App named '[DEFAULT]' already exists

it's down to a missing firebase import in app.module.ts:

import * as firebase from "firebase";

😄

Thanks all for your help.

[maxmumford]

Adding a second firebase.initializeApp call is no longer the recommended way to access the initialized Firebase object. Safari on iOS was intermittently raising the following exception as a result:

TypeError: r[t] is not a function. (In 'r[t](a)', 'r[t]' is null) : api.js:7:475

The proper way to go about this is to access AngularFire2's initialized firebase instance like so:

import { Component, Inject } from '@angular/core';
import { FirebaseApp } from 'angularfire2';

@Component({
  template: '<p>testing</p>'
})
export class AnyComponent {

  constructor(@Inject(FirebaseApp) firebaseApp: any) {
    const storageRef = firebaseApp.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

Thanks to @sunlyear for finding this solution, and this SO thread for providing it:

http://stackoverflow.com/questions/39067832/accessing-firebase-storage-with-angularfire2-angular2-rc-5

[slender9168]

For me, the error was caused by calling firebase.storage() before firebase had time to initialize (i initialized it in another file), ensure that you only call firebase.someService() inside a method that will be triggered later (after firebase have initialized)

[sachinmishra007]

Hi,

I am also getting the same exception.I found one solution but don't would that be effective for you or not.

I have initialize the firebase app as .
firebase.initializeApp(ConfigObject,"ImageBucket";

I hope this will help you.

[matomesc]

Confirming that @maxmumford's solution works for angularfire2@4.0.0-rc.0. I ran into this issue after upgrading from angularfire2@2.0.0-rc.8.

Also I'd like to add that as long as you inject the FirebaseApp object via @Inject(FirebaseApp) firebaseApp: firebase.app.App inside a constructor early in your application (eg. in the auth service) then you can continue to import and use the firebase library directly. However this is not recommended as you're bypassing angular's dependency injection.

[numerized]

Just removing the name of the app:

AngularFireModule.initializeApp(environment.firebase,'utoopie')
to
AngularFireModule.initializeApp(environment.firebase)

worked, testing right now.

[StevenConradEllis]

As @numerized suggested above, removing the name of the app in the AngularFireModule.initializeApp() method also worked for me.

[numerized]

AngularFire2 docs don't include it, so do I.

[sebinbenjamin]

AngularFireModule.initializeApp(environment.firebase) works.

Wonder what happen to Custom FirebaseApp Names in the docs.

[dexterns88]

Yes, when remove custom firebaseApp Names from AngularFireModule.initializeApp(environment.firebase) it's working well again.

[blinks32]

I don't think you must use angularfireModule to initialize the firebase app, Instead run the command outside the constructor and your export class. Right above your export class, add this:

export const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXX",
databaseURL: "XXXXXXXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXX"

};

firebase.initializeApp(firebaseConfig);

This will work from both app.module.ts and app.component.ts

[pakiza-asim]

import modules from angularfire2 in app.module.ts will did the trick.

import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireModule } from 'angularfire2';

[future-pirate-king]

Removing the app name works for me you saved me a lot of time @numerized thanks a lot

[pookdeveloper]

My problem is but I defined with a second parameter:

AngularFireModule.initializeApp(firebaseConfig, 'reservas')

if I remove the second parameter it works fine:

AngularFireModule.initializeApp(firebaseConfig)

[ghost]

@pookdeveloper
You're right about that.
I realized my second parameter had a typo. I removed second parameter and it started working.

[Daddelbob]

@maxmumford #556 (comment)
"The problem is with firebase not being initialised" --> firebase.initializeApp(environment.firebaseConfig);

Thx

[swushi]

I haven't read any of the other solutions because I solved mine right when I clicked on the link accidentally.

If you make a reference to firebase, i.e.
const db = firebase.database()
in a global state, it will throw this error. But if you re-create the reference in whatever scope you are using it it, it works fine. Not ideal, but it works.

[codemile]

I resolved this issue by injecting the FirebaseApp provider into the root module. That will force the factory function to call firebase.initializeApp(config) internally with the config options.

export class AppModule {
    public constructor(app: FirebaseApp) {
    }
}

[irauldf]

I resolved this issue by injecting the FirebaseApp provider into the root module. That will force the factory function to call firebase.initializeApp(config) internally with the config options.

export class AppModule {
    public constructor(app: FirebaseApp) {
    }
}

That saved my day. Thanks.
@import { FirebaseApp } from '@angular/fire';