Angular Error not allowing me to update and upload images in my Firebase Storage cause of not finding storage bucket

Question

Good day developers, im building this simple app of uploading images to a gallery of images in angular , but im having issues with uploading the images i got in my uploading form to the Firebase Storage throwing me an error referring to a not defined storageBucket, which is alreday declared in my environment variables , both in the folder environment.ts and environment.prod.ts, like this:

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: "-----------------------------------------"
  }
};

on my ts component where my method is , i did this as imports, constructors and methods:

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) {}

Basically importing all referring to Firebase Storage , also initializing 3 variables referring to the imgage the user select by the moment, as well as a img by default , and a boolean which keeps an eye on the submission or not of the form.In the constructor,i call the AngularFireStorage through the initialized variable called fireStorage .

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();
    }
  }

Thus basically under the condition the form to upload images is true i declare a variable (filePath)which depict the path in my storage to allow the selected image,(also a second variable is declared(fileRef)in charge of allowing the reference or path where the image selected is storaged in the storage of Firebase )then accessing the service of AngularFireStorage declared to a variable initialized in the constructor i commit the method upload(), passing as parameters the path i want to establish in my storage as well as the image selected by user and allowed in variable selectedImg, and then through the method snapshotChanges ,which returns and Observable , and using the other method pipe() i include finalize(), which basically emulates with the observable thrown by snapshotChanges() executing a final function when this method's flow ends, in this case accessing through the varaible fileRef to the method getDownloadUrl

All aparently works in the form well , but when i try to submit to Save the image in my Firebase this is the error that shows up

Im struggling by myself trying to learn Angular , thus would appreciate any idea about what i should do referring to this.Thanks in advance!!!

Answer 1

It seems you have not initialized Firebase in app.module.ts and linked your firebaseConfig defined in environment.ts

Import AngularFireModule and add it to the imports array initializing it.

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

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

Hope it helps. Happy coding!