Эмуляторы angular firebase для хранилища и firestore, не используемые приложением

Часто эту проблему решает сброс всего приложения. Я воссоздал настройку из кода, который вы предоставили, мой app.module.ts такой же, как ваш, но я передал getApp() следующим инициализаторам getAuth(getApp()) , getFirestore(getApp()) и getStorage(getApp()) с моим файлом .firebaserc как:

{
  "projects": { "default": "<PROJECT_ID>" }
}

и он работает по назначению с эмулятором firebase. Также ваша переменная конфигурации firebase не имеет locationId и databaseURL Убедитесь, что они такие, как показано ниже:

firebase: {
    projectId: '<project-id>',
    appId: '<app-id>',
    databaseURL: 'https://<project-id>-default-rtdb.firebaseio.com',
    storageBucket: '<project-id>.appspot.com',
    locationId: 'us-central',
    apiKey: '<api-key>',
    authDomain: '<project-id>.firebaseapp.com',
    messagingSenderId: '<messaging-sender-id>',
    measurementId: '<measurement-id>',
  },
  useEmulators: true, production: false,

и firebase.json следующим образом:

{
  "emulators": {
    "auth": { "port": 9099 }, "firestore": { "port": 8080 }, "storage": { "port": 9199 },
    "ui": { "enabled": true, "port": 3000 },
    "singleProjectMode": true
  },
  "firestore": { "rules": "firestore.rules" }, "storage": { "rules": "storage.rules" }
}

С использованием правил firestore и storage по умолчанию из консоли firebase в файлах firestore.rules и storage.rules соответственно.

Если предложенное выше не сработает, я порекомендую вам удалить @angular/fire, firebase из проекта и снова установить с помощью ng add @angular/fire, поскольку часто это решает мои проблемы.

Для получения информации о том, как настроить с минимальными затратами, следуйте этой статье

мой проект находится внутри монорепозитория NX, и я не смог определить, вызывали ли проблемы другие настройки рабочего пространства nx.

Поэтому я создал совершенно новое угловое приложение POC, чтобы протестировать настройку эмуляторов с нуля. Мне удалось создать приложение с минимальными требованиями, и инструкции можно найти по адресу этот выпуск github, который я создал

в конце концов мне это нужно для моего модуля ng

@NgModule({
  declarations: [AppComponent,],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireStorageModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      const auth = getAuth();
      if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://localhost:9099', {
          disableWarnings: true,
        });
      }
      return auth;
    }),
  ],
  providers: [
    { provide: FIREBASE_OPTIONS, useValue: environment.firebase },
    {
      provide: AUTH_SETTINGS,
      useValue: { appVerificationDisabledForTesting: true },
    },
    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 9099] : undefined },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

была ошибка cors:

Доступ к извлечению в 'http://localhost/identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyCnBIYMzB4KsUOzP7C7AbGvJoHsj3lmMtE' из источника «http://localhost:4200» заблокирован политикой CORS: Ответ на предварительный запрос не проходит проверку контроля доступа: Нет Заголовок Access-Control-Allow-Origin присутствует в запрошенном ресурс. Если непрозрачный ответ соответствует вашим потребностям, установите запрос режим на «no-cors», чтобы получить ресурс с отключенным CORS.

это должно быть исправлено путем замены provideAuth(() => getAuth()),

с

   provideAuth(() => {
      const auth = getAuth();
      if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://localhost:9099', {
          disableWarnings: true,
        });
      }
      return auth;
    }),

также обратите внимание, что провайдеру для аутентификации требуется http://localhost вместо localhost, чтобы решить другую ошибку, выдаваемую провайдером аутентификации.

Мне пришлось перейти с @angular/fire 7.5.0 на 7.4.1, чтобы исправить некоторые опечатки (скоро это должно быть исправлено — см. эту проблему)

Это заставило эмуляторы аутентификации, firestore и хранилища работать с моим приложением. Как только этот POC заработал, я продублировал настройки в своем рабочем пространстве NX, и теперь он работает и там.

вот моя среда:

Version info
Angular CLI: 15.1.4
Node: 18.12.1
Package Manager: npm 6.14.18
OS: win32 x64

Angular: 15.1.2
... animations, common, compiler, core, forms, platform-browser
... platform-browser-dynamic, router

Package Version
@angular-devkit/architect 0.1501.4
@angular-devkit/build-angular 15.1.4
@angular-devkit/core 14.2.10
@angular-devkit/schematics 14.2.10
@angular/cli 15.1.4
@angular/compiler-cli 15.1.3
@angular/fire 7.4.1
@schematics/angular 14.2.10
rxjs 7.8.0
typescript 4.9.5