问题描述
限时送ChatGPT账号..我正在尝试使用新的 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,在接下来的几行中,我将解释它的用途.
appponent.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/docs/build并使用Web 版本 9(模块化)"中的代码标签.
Use the documentation provided by Google to see how they changed the functions: https://firebase.google/docs/build and use the code found in the "Web version 9 (modular)" tab.
这篇关于AngularFireModule 尚未提供使用 v7.0.1 和初始化 firebase 应用程序的新方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论