Angular Fire Storage does not use emulators

Question

In my Ionic Angular Application i will be using firebase for storage and authentication.

I set up a very basic project and tried to get all the firebase emulators working. After running all commands as firebase instructed and installing angular fire all my emulators besides the one for storage are working fine. The storage emulator does not seem to connect correct because the production bucket is used for everything.

I checked the ports multiple times and tried different methods of connecting the emulator but nothing seems to be working

These are my files

storage.service.ts :

import { Injectable } from '@angular/core';
import { FirebaseApp } from '@angular/fire/app';
import { getBlob, ref } from '@angular/fire/storage';
import { getStorage } from 'firebase/storage';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  private storageReference: string = "my-reference";
  private storage = getStorage(this.app);

  constructor(private app: FirebaseApp) {}

  downloadImage(dirRef: string) {
    return getBlob(ref(this.storage, `${this.storageReference}/${dirRef}/image1.jpg`))
        .then(image => {
            var urlCreator = window.URL || window.webkitURL;
        return urlCreator.createObjectURL(image);
    })
  }
}

app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getAnalytics, provideAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

import { StorageModule, connectStorageEmulator, getStorage, provideStorage } from '@angular/fire/storage';
import { environment } from 'src/environments/environment';

import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/compat/auth';
import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/compat/firestore';
import { USE_EMULATOR as USE_STORAGE_EMULATOR } from '@angular/fire/compat/storage';
import { FIREBASE_OPTIONS } from '@angular/fire/compat';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase.config)),
    provideAuth(() => getAuth()),
    provideAnalytics(() => getAnalytics()), 
    provideFirestore(() => getFirestore()),
    provideStorage(() => getStorage()),
  ],
  providers: [
    { provide: USE_AUTH_EMULATOR, useValue: !environment.production ? ['http://localhost:9099'] : undefined },
    { provide: USE_FIRESTORE_EMULATOR, useValue: !environment.production ? ['localhost', 8080] : undefined },
    { provide: USE_STORAGE_EMULATOR, useValue: !environment.production ? ['localhost', 9199] : undefined },
    { provide: FIREBASE_OPTIONS, useValue: environment.firebase.config },
    { 
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    }, 
    ScreenTrackingService, 
    UserTrackingService
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

firebase.json :

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "europe-west1"
    }
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "firestore": {
      "port": 8080
    },
    "storage": {
      "port": 9199
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "storage": {
    "rules": "storage.rules"
  }
}

package.json :

{
  "name": "ALaCard",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.2",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/fire": "^17.0.0",
    "@angular/forms": "^17.0.2",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",
    "@angular/router": "^17.0.2",
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.5.1",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/angular": "^7.0.0",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular-eslint/builder": "^17.0.0",
    "@angular-eslint/eslint-plugin": "^17.0.0",
    "@angular-eslint/eslint-plugin-template": "^17.0.0",
    "@angular-eslint/schematics": "^17.0.0",
    "@angular-eslint/template-parser": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "@angular/compiler-cli": "^17.0.2",
    "@angular/language-service": "^17.0.2",
    "@capacitor/cli": "5.5.1",
    "@ionic/angular-toolkit": "^9.0.0",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^7.26.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "ts-node": "^8.3.0",
    "typescript": "~5.2.2"
  },
  "description": "An Ionic project"
}

---

I found a work around for the problem. In the constructor of my storage.service.ts i added this line:

if (!environment.production) connectStorageEmulator(this.storage, 'localhost', 9199);

Now the emulator is used. However i would prefer a solution that is located in the app.module.ts file.

I already tried providing the storage like so but also no success:

    provideStorage(() => {
      const storage = getStorage();
      if (!environment.production) connectStorageEmulator(storage, 'localhost', 9199);
      return storage;
    })

So would be glad, if anyone could help me out :)