4

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?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Milan Ferus-Comelo
  • 690
  • 1
  • 8
  • 20
  • It seems you got past the error mentioned in the title and you now have a CORS error. I suggest updating the title and question to reflect that. – BizzyBob Sep 05 '21 at 12:57
  • @BizzyBob Thanks for the advice! I've updated the question to reflect the new problem. – Milan Ferus-Comelo Sep 05 '21 at 13:12
  • You can run Chrome with the `--disable-web-security` flag as described [here](https://stackoverflow.com/q/3102819/1858357). Here's I've been using on mac `open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security` – BizzyBob Sep 08 '21 at 23:49

1 Answers1

0

I managed to solve this by downgrading to @angular/fire v6

Milan Ferus-Comelo
  • 690
  • 1
  • 8
  • 20