Firebase Storage подключается к приложению Angular

Question

Я хочу хранить изображения в своем веб-приложении в хранилище Firebase. Я уже установил firebase, используя npm (npm i firebase angularfire2) . Мое приложение выдает эту ошибку в консоли:

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

Вот мой environment.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);
        }
      });
  }

Кто-нибудь знает, почему моя консоль говорит, что у меня еще нет провайдера?

Answer 1

Как показывает исключение, вы, похоже, пропускаете AngularFireStorageModule в своем импорте. когда вы используете:

AngularFirestoreModule.enablePersistence()

Все, что он делает, это просто сохраняет ваши вызовы, поэтому он должен вызываться перед любыми другими методами. После вызова persist вам все равно придется импортировать модуль отдельно AngularFireStorageModule.

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

Надеюсь, это поможет:)