Angular Error not allowing me to update and upload images in my Firebase Storage 找不到存儲桶的原因

Question

開發者好，我正在構建這個簡單的應用程序，將圖像上傳到 angular 中的圖像庫，但是我在將我在上傳表單中獲得的圖像上傳到 Firebase 存儲時遇到問題，並向我拋出一個錯誤，指的是未定義的 storageBucket，它已經在我的環境變量中聲明了，在文件夾 environment.ts 和 environment.prod.ts 中，如下所示：

ENVIRONMENT FOLDERS

export const environment = {
  production: false,
  firebaseConfig : {
    apiKey: "----------------------------------------",
  authDomain: "images-gallery-abbac.firebaseapp.com",
  databaseURL: "https://images-gallery-abbac.firebaseio.com",
  projectId: "images-gallery-abbac",
  storageBucket: "images-gallery-abbac.appspot.com",
  messagingSenderId: "357163460358",
  appId: "-----------------------------------------"
  }
};

在我的方法所在的 ts 組件上，我將其作為導入、構造函數和方法來執行：

IMPORTS AND CONSTRUCTORS

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AngularFireStorage } from '@angular/fire/storage';
import { finalize } from 'rxjs/operators';
@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css'],
})
export class ImageComponent implements OnInit {

  imgSrc: string = '/assets/img/default.png';
  selectedImg: any = null;
  isSubmitted: boolean;

  formTemplate = new FormGroup({
    caption: new FormControl('', Validators.required),
    category: new FormControl(''),
    imageUrl: new FormControl('', Validators.required),
  });

  constructor(private fireStorage: AngularFireStorage) {}

基本上導入所有引用 Firebase 存儲，還初始化 3 個變量，引用當前用戶 select 的圖像，以及默認的 img，以及一個 boolean，它關注是否提交表單。在構造函數中，我通過名為 fireStorage 的初始化變量調用 AngularFireStorage。

METHOD FOR UPLOADING IMAGES

   onSubmit(formValue) {

    if (this.formTemplate.valid) {
      var filePath = `${formValue.category}/${this.selectedImg.name}`;
      const fileRef = this.fireStorage.ref(filePath);
      this.fireStorage
        .upload(filePath, this.selectedImg)
        .snapshotChanges()
        .pipe(
          finalize(() => {
            fileRef.getDownloadURL().subscribe((url) => {
              formValue['imageUrl'] = url;
            });
          })
        ).subscribe();
    }
  }

因此，基本上在上傳圖像的形式為真的情況下，我聲明了一個變量（filePath），它描述了我存儲中的路徑以允許選擇的圖像，（還聲明了第二個變量（fileRef）負責允許引用或路徑選擇的圖像存儲在 Firebase 的存儲中）然后訪問 AngularFireStorage 的服務，該服務聲明為在構造函數中初始化的變量我提交方法上傳（），作為參數傳遞我想在我的存儲中建立的路徑以及用戶選擇並在變量 selectedImg 中允許的圖像，然后通過方法 snapshotChanges 返回和 Observable，並使用其他方法 pipe() 我包括 finalize()，它基本上模擬 snapshotChanges() 拋出的可觀察對象執行最終function 當此方法的流程結束時，在本例中通過變量 fileRef 訪問方法 getDownloadUrl

一切顯然都在表格中很好地工作，但是當我嘗試提交以將圖像保存在我的 Firebase 中時，這是出現的錯誤

我自己努力學習 Angular，因此我將不勝感激關於我應該做什么的任何想法。提前致謝！

Answer 1

看來您還沒有在 app.module.ts 中初始化app.module.ts並鏈接了您在environment.ts中定義的firebaseConfig

導入AngularFireModule並將其添加到初始化它的導入數組中。

...
import { AngularFireModule } from '@angular/fire';

@NgModule({
  declarations: [
     ...
  ],
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebaseConfig),
  ],
  providers: [
     ...
  ],
  ...
})
export class AppModule { }

希望能幫助到你。 編碼愉快！