Help angular fire is not using storage emulator during development

[zer09]

I have this problem all emulator is working except on storage. When I tried to upload a file it directly upload it on the live bucket instead on the emulator.

I have this config.

// main.ts
bootstrapApplication(AppComponent, {
	providers: [
		{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
		provideIonicAngular(),
		provideRouter(routes),
		provideServiceWorker('ngsw-worker.js', {
			enabled: !isDevMode(),
			registrationStrategy: 'registerWhenStable:30000',
		}),
		importProvidersFrom(
			provideFirebaseApp(() => initializeApp(environment.fconfig)),
		),
		importProvidersFrom(provideAuth(() => environment.getAuth())),
		importProvidersFrom(provideFirestore(() => environment.getFirestore())),
		importProvidersFrom(provideFunctions(() => environment.getFunctions())),
		importProvidersFrom(provideStorage(() => environment.getStorage())),
	],
}).catch((error) => console.error(error));

and here is the environment config

export const environment = {
	production: false,
	fconfig: {
		projectId: '',
		appId: '',
		databaseURL: '',
		storageBucket: '',
		// locationId: 'us-central',
		/* eslint-disable no-secrets/no-secrets */
		apiKey: '',
		/* eslint-enable no-secrets/no-secrets */
		authDomain: '',
		messagingSenderId: '',
	},
	getAuth: () => {
		const auth = getAuth();
		connectAuthEmulator(auth, 'http://localhost:5022', {
			disableWarnings: true,
		});
		return auth;
	},
	getFirestore: () => {
		const store = initializeFirestore(getApp(), {
			experimentalForceLongPolling: true,
		});

		connectFirestoreEmulator(store, 'localhost', 5023);
		return store;
	},
	getFunctions: () => {
		const fireFunction = getFunctions();
		fireFunction.region = 'asia-east1';
		connectFunctionsEmulator(fireFunction, 'localhost', 5021);
		return fireFunction;
	},
	getStorage: () => {
		const storage = getStorage();
		connectStorageEmulator(storage, 'localhost', 5024);
		return storage;
	},
};

[zer09]

Its embarrassing, I been pulling hair for hours already, but the solution is just very simple.
I been using this code

const storage= getStorage();
// more code
const r = ref(this.storage, path);

instead of

const storage= inject(Storage)
// more code
const r = ref(this.storage, path);

[milyes]

`export const environment = {
production: true,
fconfig: {
projectId: '',
appId: '',
databaseURL: '',
storageBucket: '',
// locationId: 'us-central',
/* eslint-disable no-secrets/no-secrets /
apiKey: '',
/ eslint-enable no-secrets/no-secrets */
authDomain: '',
messagingSenderId: '',
},
getAuth: () => {
const auth = getAuth();
connectAuthEmulator(auth, 'http://localhost:5022', {
disableWarnings: true,
});
return auth;
},
getFirestore: () => {
const store = initializeFirestore(getApp(), {
experimentalForceLongPolling: true,
});

	connectFirestoreEmulator(store, 'localhost', 5023);
	return store;
},
getFunctions: () => {
	const fireFunction = getFunctions();
	fireFunction.region = 'asia-east1';
	connectFunctionsEmulator(fireFunction, 'localhost', 5021);
	return fireFunction;
},
getStorage: () => {
	const storage = getStorage();
	connectStorageEmulator(storage, 'localhost', 5024);
	return storage;
},

};
`