title: How to get the download Url of firebase file storage
body: <p>I can't understand the process of getting the download URl, Can someone please break it down to me nicely? 
  So I have this upload component here: </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AngularFireStorage, AngularFireUploadTask } from 
  'angularfire2/storage';
  import { AngularFirestore } from 'angularfire2/firestore'; 
  import { Observable } from 'rxjs/Observable';
  import { tap, filter, switchMap } from 'rxjs/operators';
  import { storage } from 'firebase/storage';
  
  
  @Component({
    selector: 'file-upload',
    templateUrl: './file-upload.component.html',
    styleUrls: ['./file-upload.component.scss']
  })
  export class FileUploadComponent {
  
    // Main task   
    task: AngularFireUploadTask;
  
    // Progress monitoring
    percentage: Observable&lt;number&gt;;
  
    snapshot: Observable&lt;any&gt;;
  
    // Download URL
    downloadURL: Observable&lt;string&gt;;
  
    // State for dropzone CSS toggling 
    isHovering: boolean;
  
    constructor(private storage: AngularFireStorage, private db: AngularFirestore) { }
  
    toggleHover(event: boolean) {
      this.isHovering = event;
    }
  
    startUpload(event: FileList) {
      // The File object
      const file = event.item(0)
  
      // Client-side validation example
      if (file.type.split('/')[0] !== 'image') { 
        console.error('unsupported file type :( ')
        return;
      }
  
      // The storage path
      const path = `test/${new Date().getTime()}_${file.name}`;
  
      // Totally optional metadata
      const customMetadata = { app: 'My AngularFire-powered PWA!' };
  
      // The main task
      this.task = this.storage.upload(path, file, { customMetadata })
  
      // Progress monitoring
      this.percentage = this.task.percentageChanges();
      this.snapshot   = this.task.snapshotChanges().pipe(
        tap(snap =&gt; {
          console.log(snap)
          if (snap.bytesTransferred === snap.totalBytes) {
            // Update firestore on completion
            this.db.collection('photos').add( { path, size: snap.totalBytes })
          }
        })
      )
  
  
      // The file's download URL
      this.downloadURL = this.task.downloadURL(); 
      console.log(this.downloadURL)
  
    const ref = this.storage.ref(path);
    this.task = ref.put(file, {customMetadata});
  
    this.downloadURL = this.task.snapshotChanges().pipe(
      filter(snap =&gt; snap.state === storage.TaskState.SUCCESS),
      switchMap(() =&gt; ref.getDownloadURL())
    )
    console.log(this.downloadURL);
  }
  
    // Determines if the upload task is active
    isActive(snapshot) {
      return snapshot.state === 'running' &amp;&amp; snapshot.bytesTransferred &lt; snapshot.totalBytes
    }}
  </code></pre>
  
  <p>I try to console the supposed way of getting the download URL but it's empty, i've seen some other ways to get it done but can't seem to get it right. Download URL is always null even with snapshot.downloadURL. 
  Following is the
   package.json: </p>
  
  <pre><code>{
    "name": "storage-app",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.0.3",
      "@angular/common": "^6.0.3",
      "@angular/compiler": "^6.0.3",
      "@angular/core": "^6.0.3",
      "@angular/forms": "^6.0.3",
      "@angular/http": "^6.0.3",
      "@angular/platform-browser": "^6.0.3",
      "@angular/platform-browser-dynamic": "^6.0.3",
      "@angular/platform-server": "^6.0.3",
      "@angular/router": "^6.0.3",
      "angularfire2": "5.0.0-rc.6",
      "core-js": "^2.5.4",
      "firebase": "4.12.1",
      "rxjs": "^6.0.0",
      "rxjs-compat": "^6.2.2",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular/cli": "^6.0.8",
      "@angular/compiler-cli": "^6.0.3",
      "@angular/language-service": "^6.0.3",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "^4.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "~2.7.2",
      "@angular-devkit/build-angular": "~0.6.8"
    }
  }
  </code></pre>
  
  <p>Thanks in advance</p>