I'd like to set up my Angular app to use Firebase's emulators and followed this guide to set up my app.module.ts as follows:

import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/compat/auth';
import { USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/compat/database';
import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/compat/firestore';

@NgModule({
  // ... Existing configuration
  providers: [
    // ... Existing Providers
    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 9099] : undefined },
    { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 9000] : undefined },
    { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 8080] : undefined },
  ]
})
export class AppModule { }

There are no errors after running firebase emulators:start as well as ng serve. If I try to log in, I get the following error in Chrome: FirebaseError: Firebase: A network AuthError (such as timeout, interrupted connection or unreachable host) has occurred. (auth/network-request-failed). There is also a failed network request: POST http://localhost/identitytoolkit.googleapis.com/v1/accounts:signUp?key=API_KEY net::ERR_CONNECTION_REFUSED

If I try the same action in FireFox, I get this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/identitytoolkit.googleapis.com/v1/accounts:signUp?key=API_KEY. (Reason: CORS request did not succeed) along with the ones I get in Chrome.

The guide I was following said to use localhost instead of http://localhost though when the page loaded, I got the error FirebaseError: Firebase: Emulator URL must start with a valid scheme (http:// or https://). (auth/invalid-emulator-scheme) in the DevTools console. I'm using "@angular/fire": "^7.0.3"

What can I do to fix this issue?