AngularFireModule 尚未提供使用 v7.0.1 和初始化 firebase 应用程序的新方法 [英] AngularFireModule has not been provided using v7.0.1 and new method of initializing the firebase app

问题描述

我正在尝试使用新的 AngularFire API (>v7) 在集成测试中连接到 Firebase 模拟器

I'm attempting to connect to the firebase emulator within an integration test, using the new AngularFire API (>v7)

import {
  TestBed
} from '@angular/core/testing';
import {
  initializeApp,
  provideFirebaseApp
} from '@angular/fire/app';
import {
  doc,
  enableIndexedDbPersistence,
  Firestore,
  getFirestore,
  provideFirestore,
  setDoc
} from '@angular/fire/firestore';
import {
  connectFirestoreEmulator
} from "firebase/firestore";

describe('FirestoreEmulatorSmoketest', () => {
  let projectId: string;
  let firestore: Firestore;

  beforeAll(() => {

    const testConfig = {
      projectId,
      auth: ...
    };
    TestBed.configureTestingModule({
      imports: [
        provideFirebaseApp(() => initializeApp(testConfig)),
        provideFirestore(() => {
          const firestore = getFirestore();
          connectFirestoreEmulator(firestore, 'localhost', 8080);
          enableIndexedDbPersistence(firestore);
          return firestore;
        }),
      ],
    })

  });

  beforeEach(() => {})
  afterAll(() => {})

  it('should connect', () => {
    const fooDoc = doc(firestore, "foo/12345");
    return setDoc(fooDoc, {
      updated: new Date()
    })
  })
});

此代码产生以下错误未提供 AngularFireModule"

This code produces the following error "AngularFireModule has not been provided"

我只能假设我没有以某种方式初始化角火?

I can only assume I'm not initialising angular fire somehow?

推荐答案

首先，我的母语不是英语，所以如果我写的像个傻瓜，你知道为什么.

First of all, my native language is not English, so if I write like a fool you know why.

试试这个.

environment.ts

export const environment = {
    production: false,
    useEmulators: true,
    firebaseConfig: {
        apiKey: 'YOUR-API-KEY',
        authDomain: 'YOUR-AUTH-DOMAIN',
        projectId: 'YOUR-PROJECT-ID',
        storageBucket: 'YPUR-STORAGE-BUCKET',
        messagingSenderId: 'YOUR-MESSAGING-SENDER-ID',
        appId: 'YOUR-APP-ID',
        measurementId: 'YOUR-MEASUREMENT-ID',
    },
};

重要提示: 如您所见，我有变量 useEmulators，在接下来的几行中，我将解释它的用途.

app.component.ts

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getAuth, provideAuth, connectAuthEmulator } from '@angular/fire/auth';
import { getFirestore, provideFirestore, connectFirestoreEmulator, enableIndexedDbPersistence } from '@angular/fire/firestore';
import { getStorage, provideStorage, connectStorageEmulator } from '@angular/fire/storage';
import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';
import { getFunctions, provideFunctions, connectFunctionsEmulator} from '@angular/fire/functions';
import { environment } from 'environments/environment'; // <--- Environment variables.  

imports: [
    // Firebase
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFirestore(() => {
        if (environment.useEmulators) {
            const firestore = getFirestore();
            connectFirestoreEmulator(firestore, 'localhost', 8080);
            enableIndexedDbPersistence(firestore);
            return firestore;
        } else {
            getFirestore();
        }
    }),
    provideAuth(() => {
        if (environment.useEmulators) {
            const fireauth = getAuth();
            connectAuthEmulator(fireauth, 'http://localhost:9099'); // <---FireAuth Port
            return fireauth;
        } else {
            getAuth();
        }
    }),
    provideStorage(() => {
        if (environment.useEmulators) {
            const firestorage = getStorage();
            connectStorageEmulator(firestorage, 'localhost', 9199); // <---- Firestorage Port
            return firestorage;
        } else {
            getStorage();
        }
    }),
    provideFunctions(() => {
        if (environment.useEmulators) {
            const firefunctions = getFunctions();
            connectFunctionsEmulator(firefunctions, 'localhost', 5001); // <--- FireFunctions Port
            return firefunctions;
        } else {
            getFunctions();
        }
    }),
    provideAnalytics(() => getAnalytics()),
],

重要(环境路径): 更改变量的环境路径，以防默认位置没有它们.

重要(本地端口): 如果您使用的本地端口与默认端口不同，请更改它们.

如您所见，我在初始化中添加了代码，以便能够以一种简单的方式在模拟项目和在线项目之间切换:

As you can see I have added code to the initializations to be able to switch between the emulated project and the online project, in a simple way:

useEmulators: true // We load the emulator environment
useEmulators: false // We load the production environment

_fireAuth.service.ts

import { Auth } from '@angular/fire/auth';

constructor(private _fireAuth: Auth) {} 

_fireStorage.service.ts

import { Storage } from '@angular/fire/storage';

constructor(private _fireStorage: Storage) {} 

_fireStore.service.ts

import { Firestore } from '@angular/fire/firestore';

constructor(private _fireStore: Firestore) {} 

只需导入您将要使用的功能，例如{ 文档、集合等...}.

It only remains to import the functions you are going to use, e.g. { doc, Collection, etc... }.

使用 Google 提供的文档查看他们如何更改功能:https://firebase.google.com/docs/build并使用Web 版本 9(模块化)"中的代码标签.

Use the documentation provided by Google to see how they changed the functions: https://firebase.google.com/docs/build and use the code found in the "Web version 9 (modular)" tab.

这篇关于AngularFireModule 尚未提供使用 v7.0.1 和初始化 firebase 应用程序的新方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！