AngularFire 2.0.0-beta.2 + Firebase SDK 3.0.3 + Angular hmr: 0.8.1 Fails

[LanderBeeuwsaert]

Since I updated my project (based on https://github.com/r-park/todo-angular2-firebase) to AngularFire 2.0.0-beta.2 + Firebase SDK 3.0.3 + Angular hmr: 0.8.1, HMR fails when trying to reload the modules (see below). Any ideas?

thanks!

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: Error: Firebase App named '[DEFAULT]' already exists.
ORIGINAL STACKTRACE:
Error: Firebase App named '[DEFAULT]' already exists.
    at Error (native)
    at Z (http://localhost:3000/vendor.js?69a408dd1fd1676af158:56918:112)
    at Object.initializeApp (http://localhost:3000/vendor.js?69a408dd1fd1676af158:56916:248)
    at _getFirebase (http://localhost:3000/vendor.js?69a408dd1fd1676af158:55828:24)
    at ReflectiveInjector_._instantiate (http://localhost:3000/vendor.js?69a408dd1fd1676af158:13841:28)
    at ReflectiveInjector_._instantiateProvider (http://localhost:3000/vendor.js?69a408dd1fd1676af158:13779:26)
    at ReflectiveInjector_._new (http://localhost:3000/vendor.js?69a408dd1fd1676af158:13768:22)
    at ReflectiveInjectorDynamicStrategy.getObjByKeyId (http://localhost:3000/vendor.js?69a408dd1fd1676af158:13422:51)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/vendor.js?69a408dd1fd1676af158:13948:39)
    at ReflectiveInjector_._getByKey (http://localhost:3000/vendor.js?69a408dd1fd1676af158:13920:26)
ERROR CONTEXT:

[ronakvbhatt07]

Got anything as solution?

[dually8]

Make sure you don't call firebase.initializeApp(config); more than once. Below is an example unit test.

import { addProviders, async, inject } from '@angular/core/testing';
import { provide } from '@angular/core';

describe('Firebase', () => {

    const config = {
        // todo: put your own stuff here
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        storageBucket: '',
    };

    firebase.initializeApp(config); // call ONLY ONCE

    beforeEach(() => {
        addProviders([
            // providers here, if any
        ]);
    });

    it('should be defined', () => {
        expect(firebase.apps[0]).toBeDefined();
    });
});

[ronakvbhatt07]

How can i load it only once. I am binding it in a service component. not getting how to do it

[dually8]

Services should be singletons, so I don't know why it'd be calling it more than once. Are you putting it in a constructor or some kind of init method?

[ronakvbhatt07]

@dually8 hey yes i got it. I was initializing it in cunstroctur. And i got that. Thank you. Now its working fine

[sliker]

@ronakvbhatt07 can you please give me instructions how you solve it? I'm having the same issue but don't know what to move and where to put it. Thanks!

[dually8]

Put it in a singleton (i.e. app.ts). Here's an example: https://github.com/dually8/Ionic2-Workshop/blob/master/app/app.ts

[ronakvbhatt07]

@sliker yes as @dually8 suggested put that initialize it in ngOnInit() the app.ts. This will solve your issue. And then just provide reference in the other component where you want to use. That's it.

[alex88]

Same issue here, using

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    routing,
    NgSemanticModule,
    AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig);
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    LoginComponent
  ],
  providers: [
    ApiService
  ],
  bootstrap: [AppComponent]
})

and still having that same error, there are no other calls of initializeApp in any part of the app