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

У меня есть угловой проект, настроенный на использование firebase, и я установил и настроил эмуляторы. Эмулятор аутентификации работает отлично, я могу войти в систему, создать пользователя и т. д. Но эмуляторы firestore и storage, настроенные в одном проекте, игнорируются, и вызовы переходят в живое приложение в облаке.

Я использую самую последнюю версию API Firebase v9.

вот мой угловой модуль, который объявляет, что предоставляет эмуляторы:

@NgModule({
  imports: [
    CommonModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      const auth = getAuth();
      if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://localhost:9099', {
          disableWarnings: true,
        });
      }
      return auth;
    }),
    provideFirestore(() => {
      let firestore: Firestore;
      if (environment.useEmulators) {
        firestore = initializeFirestore(getApp(), {
          experimentalForceLongPolling: true,
        });
        connectFirestoreEmulator(firestore, 'localhost', 8080);
      } else {
        firestore = getFirestore();
      }
      return firestore;
    }),
    provideStorage(() => {
      const storage = getStorage();
      connectStorageEmulator(storage, 'localhost', 9199);
      return storage;
    }),
  ],

а вот настройки из файла fierbase.json:

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

Я убедился, что номера портов совпадают, и когда запускается пользовательский интерфейс эмулятора, я вижу, что эмуляторы хранилища и пожарного хранилища включены, и я могу добавлять записи/файлы к каждому из них.

вот тестовая функция, в которой я вызываю firestore get doc и storage getDownloadUrl

  constructor(
    private afs: AngularFirestore,
    private storage: AngularFireStorage
  ) {}

  public test(UID: string) {
    if (UID !== null && UID !== undefined) {
      const ref = this.storage.ref('userProfilePics/pic.png');
      ref.getMetadata().subscribe((data) => console.info(data));

      this.userSettingsDoc = this.afs.doc<UserSettings>('userSettings/' + UID);
      return this.userSettingsDoc.get();
    } else {
      return null;
    }
  }

эти функции выполняются нормально и возвращают метаданные для файлов в активной учетной записи хранения. Когда я проверяю сетевой трафик, я вижу, что результаты поступают с https://firestore.googleapis.com и ** https://firebasestorage.googleapis.com**, а не с http:// localhost:8080 и http://localhost:9199 соответственно.

Я видел, что в этом документе рекомендуется добавлять префикс demo к названию вашего проекта, потому что это означает, что проект будет подключаться только к эмуляторам, а не к рабочей среде. Однако это, кажется, игнорируется в моем случае.

Итак, вот мой файл среды для сборок dev:

export const environment = {
  firebase: {
    apiKey: "AIzaSyDtCn3C3rnDIoeEvGzj4HgmEZ0cGY",
    authDomain: "app.firebaseapp.com",
    projectId: "demo-app",
    storageBucket: "app.appspot.com",
    messagingSenderId: "89700977",
    appId: "1:89707802:web:7af3c375c54dea04d0",
    measurementId: "G-6K0SDV"
  },
  useEmulators: true,
  production: false
};

Когда я запускаю эмуляторы, я получаю сообщение:

эмуляторы: обнаружен идентификатор демо-проекта "demo-app", эмулируемые сервисы будут использовать демо-конфигурацию и пытаться получить доступ к неэмулируемым службам для этого проекта потерпит неудачу.

но когда я звоню в API хранилища или FireStore, они все равно переходят к конечным точкам облака Google.

Может ли кто-нибудь помочь мне понять, почему эти локальные эмуляторы не используются в моей среде разработки?

Какую версию узла вы используете, и вы проверили firebase-debug.log, и я заметил, что ваш firebaseConfig не имеет databaseUrl?

Rohit Kharche 03.02.2023 07:08

Я использую узел 18.12.1, и журнал пуст. Кроме того, в конфигурации, сгенерированной firebase init, нет databseURL. Это для БД в реальном времени? я пользуюсь магазином огня

J King 03.02.2023 17:16
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
81
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Часто эту проблему решает сброс всего приложения. Я воссоздал настройку из кода, который вы предоставили, мой 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, поскольку часто это решает мои проблемы.

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

спасибо за продолжение rohit. Я боролся с этим несколько часов и нашел решение, похожее на ваше.

J King 04.02.2023 18:24
Ответ принят как подходящий

мой проект находится внутри монорепозитория 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

примечание: мне НЕ нужно было добавлять префикс projectId в конфигурации firebase к «demo», однако вы можете сделать это, поскольку это лучшая практика, которая защищает вас от случайного подключения к вашему действующему серверу.

J King 04.02.2023 18:37

Другие вопросы по теме