Angularfire: Error using "firebase" in AngularFire2 application

[JimLynchCodes]

I'm trying to use firebase storage in a an Angular 2 application. I was expecting to just be able to use the AngularFire object like this af.storage, but it seems that api was never implemented in AngularFire2.

I was watching this video (https://www.youtube.com/watch?v=nMR_JPfL4qg) by @davideast where he provides a hackish way of getting to firebase storage at 6:45.

However, when IU try to add this code to my project I get this error:
error_handler.js:45EXCEPTION: Error in ./AppComponent class AppComponent - inline template:4:0 caused by: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().ErrorHandler.handleError @ error_handler.js:45(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:203onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:202Zone.run @ zone.js:96(anonymous function) @ zone.js:462ZoneDelegate.invokeTask @ zone.js:236onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:235Zone.runTask @ zone.js:136drainMicroTaskQueue @ zone.js:368
error_handler.js:47ORIGINAL EXCEPTION: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().

Here is my component:

import {Component} from '@angular/core';
import {AngularFire, FirebaseObjectObservable} from 'angularfire2';
import * as firebase from 'firebase';

@Component({
  selector: 'app-firebase-list',
  templateUrl:'./firebase-list.component.html'
})
export class FirebaseListComponent {
  item: FirebaseObjectObservable<any>;

  image:string;

  constructor(af: AngularFire) {

    const storageRef = firebase.storage().ref().child('/videos/Snapchat-8007737197212799828.mp4');
    storageRef.getDownloadURL().then(url => this.image = url);


    this.item = af.database.object('/rooms/room2');
    this.item.subscribe(snapshot => console.log(snapshot.topic));


  }

  }

Also, here is my app.module.ts. Do I maybe need to change something here?

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {FirebaseListComponent} from './firebase-list/firebase-list.component';
import { AngularFireModule } from 'angularfire2';

// Must export the config
export const firebaseConfig = {
  apiKey: 'xxxxxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxxxxxxxxxxxx',
  databaseURL: 'xxxxxxxxxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxxxxxxxxx'
};

    firebase.initializeApp(firebaseConfig)

@NgModule({
  declarations: [
    AppComponent,
    FirebaseListComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thanks!

[JimLynchCodes]

Derp. I fixed it by adding firebase.initializeApp(firebaseConfig) to my app.module.ts as explained in this thread: https://github.com/angular/angularfire2/issues/556

[katowulf]

Glad you sorted this. Please use the issue template in the future when submitting questions. There's a lot of great detail here (thanks for that!) but a few key elements missing that would have helped us troubleshoot.

[sunlyear]

I think using firebase.initializeApp(firebaseConfig) is not a good solution because we are initializing another instance of firebase object. Say, we authorize user using Auth in AngularFire, the firebase (global instance) will not have all authorized information when you try to access storage ref. I made a comment in #213 base on solution from here.

[maxmumford]

@JimTheMan safari on iOS was throwing an exception as a result of initializing a second firebase instance. The solution @sunlyear found worked perfectly for me (thanks!!!). See my comment here for more details:

https://github.com/angular/angularfire2/issues/556#issuecomment-254276276