Firebase functions not being recognised in angular 4

Question

I have a service written in angular 2 for uploading an image to firebase. the code is:

import {Injectable} from "@angular/core";
import {AngularFireDatabase} from "angularfire2/database";
import {FileUpload} from "../objects/file";
import * as firebase from 'firebase';
@Injectable()
export class UploadFileService {
  private basePath = '/uploads';
  constructor(private db: AngularFireDatabase) {}
  pushFileToStorage(fileUpload: FileUpload, progress: {percentage: number}) {
    const storageRef = firebase.storage().ref();
    const uploadTask = storageRef.child(`${this.basePath}/${fileUpload.file.name}`).put(fileUpload.file);

    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        // in progress
        const snap = snapshot as firebase.storage.UploadTaskSnapshot;
        progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
      },
      (error) => {
        // fail
        console.log(error);
      },
      () => {
        // success
        fileUpload.url = uploadTask.snapshot.downloadURL
        fileUpload.name = fileUpload.file.name
        this.saveFileData(fileUpload);
      }
    );
  }

  private saveFileData(fileUpload: FileUpload) {
    this.db.list(`${this.basePath}/`).push(fileUpload);
  }
}

this code is giving me the error on the "firebase.storage" functions "property storage does not exist on type firebase static"

I have read a post on this saying that it could be fixed by changing the firebase import to "declare var firebase" but this has not worked.

David East David East · Accepted Answer · 2017-10-18T19:52:00

Change your lines to:

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

The first line imports the types. The second only imports firebase storage.

Firebase functions not being recognised in angular 4

1 Answers