尚未使用 v7.0.1 和初始化 firebase 应用程序的新方法提供 AngularFireModule

Question

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

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 尚未提供”

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

Answer 1

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

试试这个。

环境.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.module.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()),
    ],

重要（环境路径）： 更改变量的环境路径，以防默认位置没有它们。

重要（本地端口）： 如果您使用的本地端口与默认端口不同，请更改它们。

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

    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) {} 

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

使用 Google 提供的文档来查看他们如何更改功能：https://firebase.google.com/docs/build 并使用“Web 版本 9（模块化）”选项卡中找到的代码。