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



我正在尝试在我的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;

AngularFire是一个npm包,因为您使用的是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不包括在上面,所以你必须安装软件包才能使用它


angularfire的旧版本不支持包含cdn链接:

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

相关内容

  • 没有找到相关文章

最新更新