后端【免费下载链接】angularfireAngular Firebase ❤️项目地址https://gitcode.com/gh_mirrors/an/angularfire点击查看免费下载本指南讲解如何通过angular/fire的 compat兼容API 将 Angular 应用连接到 Firebase Emulator Suite从而在本地快速搭建可离线开发、可自动化测试的 Firebase 环境。读完本文你将掌握firebase init emulators的初始化流程、6.0.0 与 6.1.0 两代USE_EMULATOR依赖注入DIToken 的差异以及如何在AppModule中以环境开关控制生产与开发环境的切换。说明AngularFire 目前提供了全新的 tree-shakable API本文对应的 compat 版本文档 面向的是传统angular/fire/compat/*导入路径。关于 API 迁移可参考 v7 升级指南。概览四类受支持的模拟器Firebase Emulator Suite 允许在本地完整模拟 Firebase 后端服务。在 AngularFire 的 compat 版本中以下四类模拟器与 Angular 应用直接相关Authentication Emulator模拟身份认证流程Realtime Database Emulator模拟实时数据库Cloud Firestore Emulator模拟 Firestore 文档数据库Cloud Functions Emulator模拟可调用函数。重要版本约束Auth Emulator 仅适用于 Firebase SDK v8 及以上版本因此需要angular/fire6.1.0 或更高版本支持。在开始配置 Angular 应用之前请先按照 Install, configure and integrate Local Emulator Suite 官方文档安装并配置你需要的模拟器。快速开始TL;DR如果你尚未初始化 Firebase 项目首先执行firebase init随后启动模拟器设置向导firebase init emulators按照向导提示下载所需模拟器。完成后检查firebase.json是否已写入各模拟器的默认端口配置形如{ // 已有的 firebase 配置 ... // 可选的模拟器配置。缺省时使用默认值。 emulators: { firestore: { port: 8080 }, ui: { enabled: true, // 默认是 true port: 4000 // 若不指定参见 CLI 日志中的实际端口 }, auth: { port: 9099 }, functions: { port: 5001 }, database: { port: 9000 }, pubsub: { port: 8085 } } }启动所有模拟器firebase emulators:start当终端输出类似如下内容时说明模拟器已就绪可以连接你的应用┌─────────────────────────────────────────────────────────────┐ │ ✔ All emulators ready! It is now safe to connect your app. │ │ i View Emulator UI at http://127.0.0.1:4000/ │ └─────────────────────────────────────────────────────────────┘此时可在浏览器打开http://127.0.0.1:4000/查看 Emulator UI用于检查数据、触发事件等。在 AppModule 中导入 DI Token 并连接模拟器在 Angular 应用侧连接本地模拟器的核心机制是由 AngularFire 提供的依赖注入 Token。需要特别注意的是6.0.0 与 6.1.0 两个版本之间的连接方式存在差异6.1.0 起统一采用USE_EMULATORToken 传入[host, port]元组而 6.0.0 及更早版本则依赖各模块各自的旧式 Token详见下文。6.1.0 方式统一的 USE_EMULATOR Token从 6.1.0 开始database、firestore、auth、functions以及storage模块都各自导出了一个USE_EMULATORToken用于配置模拟器的host和port——通过传入[string, number]元组。其默认值为localhost与firebase.json中分配的端口。首先更新environment.ts增加一个控制开关export const environment { production: false, useEmulators: true, // ... }随后在app.module.ts中导入各模块的USE_EMULATORToken 并注册 Providerimport { USE_EMULATOR as USE_AUTH_EMULATOR } from angular/fire/compat/auth; import { USE_EMULATOR as USE_DATABASE_EMULATOR } from angular/fire/compat/database; import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from angular/fire/compat/firestore; import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from angular/fire/compat/functions; NgModule({ // ... 已有配置 providers: [ // ... 已有 Provider { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? [http://localhost, 9099] : undefined }, { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? [localhost, 9000] : undefined }, { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? [localhost, 8080] : undefined }, { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? [localhost, 5001] : undefined }, ] }) export class AppModule { }useEmulators环境开关用于控制应用是否连接模拟器通常仅在生产环境production: true之外启用。当该开关为false时useValue传入undefinedProvider 即被忽略应用照常连接线上 Firebase 服务。源码实现细节这些 Token 的底层实现位于 src/compat 目录下。以 Auth 为例src/compat/auth/auth.ts 中定义了type UseEmulatorArguments Parametersfirebase.auth.Auth[useEmulator]; export const USE_EMULATOR new InjectionTokenUseEmulatorArguments(angularfire2.auth.use-emulator);Token 类型直接取自 Firebase SDK 的useEmulator方法参数即[host, port]元组。在工厂函数中AngularFire 会将注入的元组展开后透传给底层 SDKif (useEmulator) { auth.useEmulator(...useEmulator); }同理Firestore 在 src/compat/firestore/firestore.ts 与 src/compat/firestore/firestore.ts、Realtime Database 在 src/compat/database/database.ts 与 src/compat/database/database.ts、Cloud Functions 在 src/compat/functions/functions.ts 与 src/compat/functions/functions.ts 中都采用了完全一致的模式——USE_EMULATOR元组最终都会以展开spread方式调用对应 SDK 实例的useEmulator(host, port)。Storage 模块同样提供了USE_EMULATORToken见 src/compat/storage/storage.ts可用于连接 Storage 模拟器。可选启用 Cloud Functions 的 NEW_ORIGIN_BEHAVIOR针对 Firebase v8 中 Cloud Functions 的 origin 新行为可以结合已有的ORIGINToken 一起使用NEW_ORIGIN_BEHAVIORTokenimport { isDevMode, NgModule } from angular/core; import { ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from angular/fire/compat/functions; NgModule({ // ... 已有配置 providers: [ // ... 已有 Provider { provide: NEW_ORIGIN_BEHAVIOR, useValue: true }, { provide: FUNCTIONS_ORIGIN, useFactory: () isDevMode() ? undefined : location.origin }, ] }) export class AppModule { }FUNCTIONS_ORIGIN采用工厂函数动态取值开发模式isDevMode()为真下返回undefined此时若开启了NEW_ORIGIN_BEHAVIOR可结合模拟器/默认源使用生产模式下则取当前页面location.origin作为函数调用源。该 Token 在官方文档的 functions 指南 与站点文档 site/src/functions/getting-started.md 中均有对应说明。6.0.0 方式各模块旧式 Token除 Auth Emulator 外6.0.0 及更早版本采用一组不同的 Token且传入的是完整 URL 字符串import { URL as DATABASE_URL } from angular/fire/compat/database; import { ORIGIN as FUNCTIONS_ORIGIN } from angular/fire/compat/functions; import { SETTINGS as FIRESTORE_SETTINGS } from angular/fire/compat/firestore; NgModule({ // ... 已有配置 providers: [ { provide: DATABASE_URL, useValue: environment.useEmulators ? http://localhost:9000?ns${environment.firebase.projectId} : undefined }, { provide: FIRESTORE_SETTINGS, useValue: environment.useEmulators ? { host: localhost:8080, ssl: false } : {} }, { provide: FUNCTIONS_ORIGIN, useFactory: environment.useEmulators ? http://localhost:5001 : undefined }, ] }) export class AppModule { }几个值得注意的要点Realtime Database通过URLToken 传入完整地址且必须携带?nsprojectId查询参数指定命名空间namespace否则无法正确路由到模拟器数据库。源码中该 Token 定义于 src/compat/database/database.tsFirestore通过SETTINGSToken 传入{ host: localhost:8080, ssl: false }即模拟器为纯 HTTP 而非 HTTPS因此必须显式关闭ssl。对应 Token 定义于 src/compat/firestore/firestore.tsFunctions通过ORIGINToken 传入完整 origin 地址。不过文档示例中useFactory直接赋值为字符串的写法仅为示意实践中应使用函数形式例如useFactory: () environment.useEmulators ? http://localhost:5001 : undefinedAuth Emulator在 6.0.0 时代并未提供旧式 Token它正是从 6.1.0 的USE_EMULATOR方式才获得支持。新旧方式对照小结模块6.1.0推荐6.0.0 及更早AuthUSE_EMULATOR[http://localhost, 9099]不支持Auth Emulator 需要 6.1.0Realtime DatabaseUSE_EMULATOR[localhost, 9000]URLhttp://localhost:9000?nsprojectIdFirestoreUSE_EMULATOR[localhost, 8080]SETTINGS{ host: localhost:8080, ssl: false }FunctionsUSE_EMULATOR[localhost, 5001]ORIGINhttp://localhost:5001如果仍在使用 6.0.0 之前的版本建议将应用升级到最新版本以享受这些新特性带来的统一配置体验。参考新 API 下的模拟器连接方式除本文重点的 compat API 外仓库的示例应用 sample 展示了新tree-shakableAPI 下的连接方式可作为对照参考。其环境配置在 sample/src/environments/environment.ts 中以emulatorPorts集中管理各模拟器端口emulatorPorts: { auth: 9099, functions: 5001, firestore: 8080, database: 9000, storage: 9199, },组件中则直接调用新版 Firebase SDK 的连接函数例如 sample/src/app/database/database.component.tsif (!(this.database as any)._instanceStarted environment.emulatorPorts?.database) { connectDatabaseEmulator(this.database, localhost, environment.emulatorPorts.database); }app.config.ts 中连接 Auth 模拟器时还会传入{ disableWarnings: true }用于屏蔽开发环境下的警告提示。虽然这套新 API 的连接方式与本文的 compat 方式不同但端口约定Firestore 8080、Auth 9099、Functions 5001、Database 9000、Storage 9199与firebase.json保持一致方便你在两种 API 之间平滑迁移。结语通过上述配置你可以在不触碰线上 Firebase 资源的情况下在本地完成认证、数据库、Firestore 与函数调用的全链路原型开发与自动化测试。核心要点可归纳为用firebase init emulators生成firebase.json中的端口配置再用firebase emulators:start启动在AppModule中通过USE_EMULATOR6.1.0或旧式 Token6.0.0注入模拟器地址借助environment.useEmulators开关实现开发/生产环境的无缝切换对于旧版本应用升级到最新版以统一使用新 Token 并获得 Auth Emulator 支持。赞分享后端【免费下载链接】angularfireAngular Firebase ❤️项目地址https://gitcode.com/gh_mirrors/an/angularfire点击查看免费下载相关推荐Automatisch 接入 Airbrake 连接配置指南从 Auth Token 获取到连接验证原理Automatisch 接入 Airbrake 连接配置指南从 Auth Token 获取到连接验证原理 本指南以 Automatisch 官方文档中 Air工作流自动化后端前端低代码任务调度Metabase 连接 PostgreSQL 数据仓库完全指南从连接配置到源码级原理Metabase 连接 PostgreSQL 数据仓库完全指南从连接配置到源码级原理 PostgreSQL 是 Metabase 最常用的数据仓库之一本指南数据分析数据可视化后端数据库客户端企业应用RedisDesktopManager连接配置大全从本地到云端的完整教程RedisDesktopManager简称RDM是一款功能强大的Redis数据库桌面管理工具它提供了直观的图形界面让开发者能够轻松连接和管理Redis数数据库客户端桌面应用上一篇3分钟掌握高效无水印下载工具小红书高清原图保存秘诀下一篇深度解析Deliberate模型3大核心突破如何重塑AI图像生成体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考