Using “firebase” with AngularFire2 v4

Question

I use angularfire2 for my Angular web apps and I recently upgraded to the v4.0.0-rc0. It behaves different in a few ways. The thing I need help with is using 'firebase' (the regular Firebase JS library) along side angularfire2 in the v4.0.0 version. In previous versions you would import:

import * as firebase from 'firebase';

and then use the regular Firebase JS library with statements like this:

firebase.database().ref().child("message").set("hi");

That worked fine in prior versions, see this video for more about that approach (it's a requirement when using storage): https://www.youtube.com/watch?v=nMR_JPfL4qg#t=6m11s

However when I try to do the same thing with v4.0.0-rc0 I get this error message:

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

I can read the message and realize that it thinks that initializeApp hasn't been called. But if I use the angularfire2 v4 code like this...

this.afDatabase.object("somepath").subscribe( (myData: any) => {
      console.log("My data", data); 
     });

that is all fine, since I to the initializeApp in my app.module.ts. So the real issue is that previously the line:

AngularFireModule.initializeApp(environment.firebaseConfig),

worked for both angularfire2 AND the regular Firebase JS library, but now it doesn't. What is the right way to use the regular Firebase JS library for the database now? Do I call firebase.initializeApp in the app.module.ts too? That seems bad to make 2 initializeApp calls of course, but I don't know the right way to do it.

Answer 1

Figured out my issue, I needed to NOT give a custom name within my app.module.ts when I initialized the app. This works fine:

AngularFireModule.initializeApp(environment.firebaseConfig),

This was bad:

AngularFireModule.initializeApp(environment.firebaseConfig, 'myApp'),

Answer 2

you have to put in your import the new implementations modules and put import * as firebase from 'firebase/app'; in the component where you are gonna use providersvar provider = new firebase.auth.GoogleAuthProvider();

      import { AngularFireModule } from 'angularfire2';
      import { AngularFireDatabaseModule } from 'angularfire2/database';
      import { AngularFireAuthModule } from 'angularfire2/auth';

      export const environment = {
        production: false,
        firebase: {
          apiKey: "dfgdfgdsfgdfgsdfg",
          authDomain: "fire-dfgdfg.sdfgdfg.com",
          databaseURL: "https://fire-dsfgdfg.dfgdfgdf.com",
          projectId: "fire-dfgdfg",
          storageBucket: "fire-dfgdfg.appspot.com",
          messagingSenderId: "65456456464654"
        }
      }

      @NgModule({
        imports: [
          BrowserModule,
          BrowserAnimationsModule,
          AppRoutingModule,
          BsDropdownModule.forRoot(),
          TabsModule.forRoot(),
          ChartsModule,
          AngularFireModule.initializeApp(environment.firebase),
          AngularFireDatabaseModule,
          AngularFireAuthModule
        ],
        declarations: [
          AppComponent,
          FullLayoutComponent,
          SimpleLayoutComponent,
          ChatLayoutComponent,
          NAV_DROPDOWN_DIRECTIVES,
          BreadcrumbsComponent,
          SIDEBAR_TOGGLE_DIRECTIVES,
          AsideToggleDirective
        ],
        providers: [{
          provide: LocationStrategy,
          useClass: HashLocationStrategy
        }],
        bootstrap: [AppComponent]
      })