How to import AngularFireStorage from firebase cdn files in Angular App

Viewed 294

I am trying to use firebase from CDN files in my Angular App. My component looks below.

import { AngularFireStorage } from '@angular/fire/storage';

constructor( private storage: AngularFireStorage  ) {}

uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'my-path';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);
  }

CDN script I get from the Firebase console looks like below. This is pasted on <head> section in index.html:

<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-storage.js"></script>

<script>
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    ...
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.storageBucket();
</script>

Now, how do I import/use AngularFireStorage in app.component.ts? I use Angular 10.

What I tried?

declare let AngularFireStorage: any;
1 Answers

AngularFire is an npm package, since you are using angular then you already have a node_modules folder in your project. Then all you have to do is execute:

ng add @angular/fire

https://github.com/angular/angularfire

The following links:

<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-storage.js"></script>

will add the firebase core and firebase storage javascript libraries. But the angularfire is not included above, thus you have to install the package to be able to use it.


The old, and not supported version of angularfire contained a cdn link:

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
Related