Angularfire: Firebase Storage is not working with ionic 3 & AngularFire 4.0.0 rc

[raviranjan528]

Angular:Angular 4

Firebase:3.9.0

AngularFire:4.0.0rc

import * as firebase from 'firebase';

const storageRef = firebase.storage().ref().child('images/image.png');
storageRef.getDownloadURL().then(url => this.image = url);

error--> firebase.storage() takes either no argument or a Firebase App instance

[markgoho]

In your parent module, you should have import 'firebase/storage and in the component where you're using storage, you should have import { FirebaseApp } from 'angularfire2';

Please search the issues before posting an error like this. It's been asked and answered a few times already.

[AndradeSoto]

Sorry @markgoho but how to use the import 'firebase/storage'

**'import * as firebaseStorge from 'firebase/storage';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

storageAvatarRef: any;
constructor(public navCtrl: NavController,
public platform: Platform,
private pdfmake: PdfmakeService,
)
{
this.storageAvatarRef = firebaseStorge.ref.getDownloadURL;
}

When i run the server i get this

[Error]

core.es5.js:1084
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'getDownloadURL' of undefined
TypeError: Cannot read property 'getDownloadURL' of undefined
at new HomePage (home.ts:25)
at createClass (core.es5.js:10883)
at createDirectiveInstance (core.es5.js:10701)
at createViewNodes (core.es5.js:12064)
at createRootView (core.es5.js:11969)
at callWithDebugContext (core.es5.js:13184)
at Object.debugCreateRootView [

[raviranjan528]

@markgoho and @jamesdaniels Sorry But its not working with ionic 3
//error
TypeError: this.fb.storage is not a function

//Module
import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {ProfilePage} from './profile';
import 'firebase/storage'
@NgModule({
declarations: [
ProfilePage,
],
imports: [
IonicPageModule.forChild(ProfilePage),
],
exports: [
ProfilePage
]
})
export class ProfilePageModule {
}
//components

import {Component, Inject} from '@angular/core';
import {NavController, IonicPage} from 'ionic-angular';
import {NgForm} from "@angular/forms";
import {AngularFireAuth} from 'angularfire2/auth';
import {AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable} from 'angularfire2/database';
import * as firebase from 'firebase'; // for typings
import { FirebaseApp } from 'angularfire2';

@IonicPage()
@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {

file:any;
forUpLoadRef: FirebaseListObservable;
userRef: FirebaseObjectObservable;
storageRef:any;

constructor(public navCtrl: NavController, public af: AngularFireAuth,
public db: AngularFireDatabase, private fb: FirebaseApp) {}

UploadNewImage(){
this.file = (document.getElementById('inputFileId')).files[0];
console.log("file recived"+ JSON.stringify(this.file.name));
let storageRef = this.fb.storage().ref();
var metadata = {
contentType: 'image/*'
};

this.storageRef.child('images/'+this.file.name).put(this.file,metadata)

}

}

//error
TypeError: this.fb.storage is not a function

[chunxchun]

try this:
import * as firebase from 'firebase/app';
import 'firebase/storage';

[raviranjan528]

Sorry To disturb you @chunxchun but its not working yet after putting your code

Uncaught (in promise): storage: Firebase: firebase.storage() takes either no argument or a Firebase App instance. (app/invalid-app-argument).

[chunxchun]

in my case, I put both lines in a provider (not in Module) and then inject it to components that need access to the firebase storage, and no need to import { FirebaseApp } from 'angularfire2' anymore.

So in util-provider.ts:

import { AngularFireDatabase, FirebaseObjectObservable, FirebaseListObservable } from 
'angularfire2/database';
import * as firebase from 'firebase/app';
import 'firebase/storage';
//import { FirebaseApp } from 'angularfire2';

and then in the component:

import { UtilProvider } from '../../providers/util-provider';
constructor(public util: UtilProvider) {}

[chunxchun]

and I think the ref in your code should be
let storageRef = firebase.storage().ref();
instead of
let storageRef = this.fb.storage().ref();

[pk359]

@markgoho I agree there are many response to this kind of issue. But after 120 google search and looking to issues finally found this one, which you referred to as
"Please search the issues before posting an error like this. It's been asked and answered a few times already."

but you are the only one who gave a simple and most clear answer. works. thanks.
But no question is a dumb question. the way information are presented may not be understood by everyone.

[sean-hill]

Hey guys I was having this same problem, but getting an issue where it was saying that my Firebase app had not been initialized. After an hour of debugging, the solution was ending up being including auth and db in the constructor like so:

import { Component } from '@angular/core'
import { AngularFireAuth } from 'angularfire2/auth'
import { AngularFireDatabase } from 'angularfire2/database'
import * as firebase from 'firebase/app'
import 'firebase/storage'

@Component({
  selector: 'page-photos',
  templateUrl: 'photos.html'
})
export class PhotosPage {
  constructor(
    public afAuth: AngularFireAuth,
    public afDb: AngularFireDatabase,
  ) {}

  upload() {
    const storageRef = firebase.storage().ref()
    // ...
  }
}

So even though I don't use auth and db, I still had to include them in the constructor.

[sascha1337]

+1 sean-hill this worked for me thx

[aliwaqassi]

Thanks @sean-hill You saved my day

[fcampinho]

Thanks: @chunxchun it works perfectly.

[thanhtung90]

Thank @sean-hill, my case, I just need Auth and it's worked

[maximdevFR]

good

[CODEX-Prog]

Mine worked by removing AngularFireAuth Thanks @sean-hill

[ghost]

try this:
import * as firebase from 'firebase/app';
import 'firebase/storage';

it works for me..thanks