Angularfire: FirebaseRef - not working anymore with v4?

[Benny739]

Hi,

in v4 FirebaseRef as described in API Reference is no longer working.
What is the best practice in v4, if we need direct access to the API, e.g. to upload files to firebase storage?

Regards
Benny

[davideast]

@Benny739 FirebaseRef was removed in favor of FirebaseApp which gives you much more power and flexibility.

import { FirebaseApp } from 'angularfire2';

constructor(app: FirebaseApp) {
  const database = app.database();
  const ref = database.ref().child('items');
}

For Storage I would import storage first in your main module.

import { AngularFireModule } from 'angularfire2';
import 'firebase/storage'; // only import firebase storage

@NgModule({
  imports: [
    AngularFireModule.initializeApp({ }) // your config here
  ]
})
export class AppModule { }

Then in your code you can import the firebase typings from firebase/app and use storage off of FirebaseApp:

import { FirebaseApp } from 'angularfire2';

constructor(app: FirebaseApp) {
  const database = app.storage();
  const ref = storage.ref().child('items');
}

[Benny739]

Hi David,

thanks, but if I just do
import { FirebaseApp } from 'angularfire2';
There is no storage function in FirebaseApp. I also need to import
`
import * as firebase from 'firebase';
constructor(@Inject(FirebaseApp) public fb: firebase.app.App) {

}

`
that I get access to storage in FirebaseApp.
Is this a wanted behaviour?

[markgoho]

Hey @Benny739 I don't think the pathway to use Storage is crystal clear and could maybe use some documentation, but here's how I've got mine working:

In my app.module.ts: (root module) I have:

import { AngularFireModule } from 'angularfire2';

In my admin.module.ts: (the only place I need storage functionality)

import 'firebase/storage';

Then, in my component where I want the storage methods,

import * as firebase from 'firebase/app'; // for typings
import { FirebaseApp } from 'angularfire2'; // for methods

constructor(private fb: FirebaseApp) { }

let storageRef = this.fb.storage().ref();
const metadata: firebase.storage.UploadMetadata = { ... } // typed with firebase import above

[Benny739]

Thank you so much, it is working now :)