Firebase 存储连接到 Angular 应用答案

【问题标题】：Firebase Storage connecting to Angular appFirebase 存储连接到 Angular 应用
【发布时间】：2020-08-02 05:20:37
【问题描述】：

我想将图片存储在 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);
        }
      });
  }

有人知道为什么我的控制台说我仍然没有提供程序吗？

【问题讨论】：

标签： javascript angular typescript firebase google-cloud-firestore

【解决方案1】：

正如 exepction 所暗示的，您的导入中似乎缺少 AngularFireStorageModule。使用时：

AngularFirestoreModule.enablePersistence()

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

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

希望对你有帮助:)

【讨论】：