如何从Angular App中的firebase cdn文件导入AngularFireStorage

Question

我正在尝试在我的 Angular 应用程序中使用来自 CDN 文件的 firebase。 我的组件如下所示。

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);
  }

我从 Firebase 控制台获得的 CDN 脚本如下所示。 这是粘贴在 index.html 中的<head>部分：

<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>

现在，如何在 app.component.ts 中导入/使用 AngularFireStorage？ 我使用 Angular 10。

我试过什么？

declare let AngularFireStorage: any;

Answer 1

AngularFire是一个 npm package，因为你使用的是 angular 那么你的项目中已经有一个node_modules文件夹。 然后你所要做的就是执行：

ng add @angular/fire

https://github.com/angular/angularfire

以下链接：

<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>

将添加 firebase 内核和 firebase 存储 javascript 库。 但是上面没有包含angularfire ，因此你必须安装package才能使用它。

旧的、不受支持的angularfire版本包含一个 cdn 链接：

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

如何从Angular App中的firebase cdn文件导入AngularFireStorage

问题描述

1 个解决方案

解决方案1
0 2020-09-23 06:28:17

如何从Angular App中的firebase cdn文件导入AngularFireStorage

问题描述

1 个解决方案

解决方案1 0 2020-09-23 06:28:17

解决方案1
0 2020-09-23 06:28:17