时间戳

首页 > 解决方案 > Firebase 存储连接到 Angular 应用

javascript - Firebase 存储连接到 Angular 应用

问题描述

我想将图像存储在 Firebase 存储中的网络应用中。我已经使用 npm (npm i firebase angularfire2)安装了 firebase 。我的应用程序在控制台中抛出此错误：

Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireStorage]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireStorage]: 
    NullInjectorError: No provider for AngularFireStorage!

这是我的 app.module.ts

import { environment } from '../environments/environment';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';

  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence(),
    ....],
  providers: [AngularFireModule],

这是我的环境.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: xxxxxxxxxxxxx
    authDomain: xxxxxxxxxxxxx
    databaseURL: xxxxxxxxxxxxx
    projectId: xxxxxxxxxxxxx
    storageBucket: xxxxxxxxxxxxxx
    messagingSenderId: xxxxxxxxxxxxx
    appId: xxxxxxxxxxxxx
    measurementId: xxxxxxxxx
  }
}

我正在尝试在某些组件中调用某些函数：

onFileSelected(event) {
    var n = Date.now();
    const file = event.target.files[0];
    const filePath = `RoomsImages/${n}`;
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(`RoomsImages/${n}`, file);
    task.snapshotChanges().pipe(
        finalize(() => {
          this.downloadURL = fileRef.getDownloadURL();
          this.downloadURL.subscribe(url => {
            if (url) {
              this.fb = url;
            }
            console.log(this.fb);
          });
        })
      )
      .subscribe(url => {
        if (url) {
          console.log(url);
        }
      });
  }

有谁知道为什么我的控制台说我仍然没有提供者？

标签： javascriptangulartypescriptfirebasegoogle-cloud-firestore

解决方案

正如 exepction 所暗示的那样，您似乎AngularFireStorageModule在导入中丢失了。当你使用：

AngularFirestoreModule.enablePersistence()

它所做的只是保持您的调用，因此必须在任何其他方法之前调用它。调用persist后，您仍然需要单独导入模块AngularFireStorageModule。

imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(fbConfig),
    AngularFirestoreModule.enablePersistence(),
    AngularFireStorageModule,
],

希望能帮助到你 ：）

推荐阅读