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