后端【免费下载链接】angularfireAngular Firebase ❤️项目地址https://gitcode.com/gh_mirrors/an/angularfire点击查看免费下载Firebase Emulator Suite 允许开发者在本机完整模拟 Firebase 后端服务无需真实项目凭据即可快速原型迭代。本文基于angular/fire官方指南site/src/get-started/local-development.md讲解如何在 Angular 应用中通过依赖注入令牌DI Token接入 Authentication、Realtime Database、Cloud Firestore 与 Cloud Functions 四种本地模拟器涵盖从firebase.json初始化到AppModule配置的完整链路并补充仓库源码级实现佐证帮助你掌握一套可复制的本地联调方案。支持范围与前置条件angular/fire官方指南明确支持以下四种模拟器它们全部包含在 Firebase 本地模拟器套件工作流中Authentication Emulator身份认证Realtime Database Emulator实时数据库Cloud Firestore Emulator云 FirestoreCloud Functions Emulator云函数关键版本约束Auth 模拟器仅适用于 Firebase v8 及以上版本对应需要angular/fire6.1.0 或更高版本的支持。如果你的项目运行在更低的angular/fire版本上请先升级到最新版本以便获得这些新特性。在配置 Angular 应用之前需要先安装并配置好 Local Emulator Suite 本身。仓库中的示例项目 sample/firebase.json 展示了完整的模拟器配置形态可作为参照模板。初始化本地模拟器1. 初始化 Firebase 项目如果尚未初始化先在你的项目目录中执行firebase init2. 启动模拟器配置向导随后启动模拟器设置向导firebase init emulators按照向导提示下载你需要使用的模拟器。完成之后检查firebase.json是否已按各模拟器的默认端口更新配置大致如下{ // Existing firebase configuration ... // Optional emulator configuration. Default // values are used if absent. emulators: { firestore: { port: 8080 }, ui: { enabled: true, // Default is true port: 4000 // If unspecified, see CLI log for selected port }, auth: { port: 9099 }, functions: { port: 5001 }, database: { port: 9000 }, pubsub: { port: 8085 } } }各模拟器的默认端口约定为Firestore8080、Auth9099、Functions5001、Realtime Database9000、Pub/Sub8085Emulator UI 默认启用并监听4000端口。配置项缺省时采用默认值。仓库示例 sample/firebase.json 中额外配置了 Storage 模拟器端口9199并将ui.enabled设为true读者可按需增补。3. 启动模拟器配置完成后即可启动全部模拟器firebase emulators:start启动成功后终端会输出如下提示标明 Emulator UI 的访问地址┌─────────────────────────────────────────────────────────────┐ │ ✔ All emulators ready! It is now safe to connect your app. │ │ i View Emulator UI at http://127.0.0.1:4000/ │ └─────────────────────────────────────────────────────────────┘在 AppModule 中导入 DI 令牌将 Angular 应用连接到本地模拟器最简便的方式是使用angular/fire提供的依赖注入令牌。注意angular/fire6.0.0 与 6.1.0 之间这一连接方式存在差异6.1.0 起引入了统一的USE_EMULATOR令牌机制下文详述而 6.0.0 使用的是另一套旧式令牌见旧版方式6.0.0一节。6.1.0 新方式USE_EMULATOR 令牌database、firestore、auth、functions 每个模块都提供USE_EMULATOR令牌用于配置模拟器的host与port传入一个[string, number]元组默认值为localhost与你firebase.json中分配的端口。在app.module.ts中按如下方式导入并注入这些令牌import { USE_EMULATOR as USE_AUTH_EMULATOR } from angular/fire/auth; import { USE_EMULATOR as USE_DATABASE_EMULATOR } from angular/fire/database; import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from angular/fire/firestore; import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from angular/fire/functions; NgModule({ // ... Existing configuration providers: [ // ... Existing Providers { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? [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 { }environment.useEmulators标志用于控制应用是否连接模拟器通常在非生产环境中开启。你可以在environment.ts中声明该标志export const environment { production: false, useEmulators: true, ... }源码级佐证在 compat 版实现中USE_EMULATOR被定义为InjectionToken其类型即对应 Firebase SDK 的useEmulator方法参数见 src/compat/auth/auth.ts、src/compat/functions/functions.ts。在ɵauthFactory中该元组会被展开后直接调用 SDK 方法src/compat/auth/auth.tsconst auth zone.runOutsideAngular(() app.auth()); if (useEmulator) { auth.useEmulator(...useEmulator); }Firestore 与 Functions 的实现同理令牌注入后最终以useEmulator(...useEmulator)的形式透传给底层 SDK参见 src/compat/firestore/firestore.ts 与 src/compat/functions/functions.ts。这意味着你只需要关注传什么值底层连接细节由库完成。仓库测试也印证了该用法例如在 src/compat/database/database.spec.ts 中直接以{ provide: USE_EMULATOR, useValue: [localhost, databaseEmulatorPort] }注入。为 Cloud Functions 启用 NEW_ORIGIN_BEHAVIOR在 Firebase v8 中还可以选择新的 Cloud Functions origin 设置方式将NEW_ORIGIN_BEHAVIOR令牌与已有的ORIGIN令牌配合使用import { isDevMode, NgModule } from angular/core; import { ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from angular/fire/functions; NgModule({ // ... Existing configuration providers: [ // ... Existing Providers { provide: NEW_ORIGIN_BEHAVIOR, useValue: true }, { provide: FUNCTIONS_ORIGIN, useFactory: () isDevMode() ? undefined : location.origin }, ] }) export class AppModule { }这里NEW_ORIGIN_BEHAVIOR开启新的 origin 行为FUNCTIONS_ORIGIN则根据是否处于开发模式动态提供值开发模式下为undefined走本地模拟器生产模式下取location.origin。源码级佐证在 compat 实现中ORIGIN与REGION被定义为两个独立的InjectionTokensrc/compat/functions/functions.ts且二者不能同时使用——同时提供时库会抛出异常src/compat/functions/functions.tsif (region origin) { throw new Error(REGION and ORIGIN can\t be used at the same time.); } functions app.functions(region || origin || undefined);旧版方式6.0.0除 Auth 模拟器外6.0.0 及更早版本使用的是另一组不同的令牌需要将完整 URL 路径以字符串形式传入import { URL as DATABASE_URL } from angular/fire/database; import { ORIGIN as FUNCTIONS_ORIGIN } from angular/fire/functions; import { SETTINGS as FIRESTORE_SETTINGS } from angular/fire/firestore; NgModule({ // ... Existing configuration 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通过DATABASE_URL传入完整地址且必须携带?nsprojectId命名空间参数environment.firebase.projectId来自 Firebase 配置Firestore通过SETTINGS传入{ host, ssl }对象其中ssl: false用于关闭本地连接的 HTTPSCloud Functions通过FUNCTIONS_ORIGIN直接传入http://localhost:5001Auth旧版没有对应的模拟器令牌这也是 Auth 模拟器需要 6.1.0 的USE_EMULATOR机制的原因。如果你仍在旧版本上建议升级到最新版angular/fire以使用统一、简洁的USE_EMULATOR令牌方式。仓库中的完整实践参照除上述配置方法外仓库的示例应用还展示了当前模块化 API 下的另一种本地联调实践端口集中管理示例环境文件 sample/src/environments/environment.ts 将各模拟器端口统一放在emulatorPorts对象中auth9099、functions5001、firestore8080、database9000、storage9199方便一处修改、全局生效按需连接在组件初始化阶段调用模块化 SDK 的连接函数例如connectAuthEmulator(auth, ...)sample/src/app/app.config.ts、connectFirestoreEmulator(this.firestore, localhost, ...)sample/src/app/firestore/firestore.component.ts、connectFunctionsEmulator(this.functions, localhost, ...)sample/src/app/functions/functions.component.ts等并通过_instanceStarted/_settingsFrozen等内部状态避免重复连接。这套做法与文档中的 DI 令牌方案各有适用场景DI 令牌适合集中式配置、声明式注入模块化 SDK 函数则适合在需要精确控制连接时机的代码中直接调用。两者都可以配合firebase emulators:start实现完整的本地开发闭环。小结通过firebase init emulators生成模拟器配置、firebase emulators:start启动服务再借助angular/fire的USE_EMULATOR令牌6.1.0或旧式 URL/SETTINGS 令牌6.0.0即可让 Angular 应用在本地无缝连接 Auth、Realtime Database、Firestore 与 Cloud Functions 模拟器。核心要点可概括为版本门槛Auth 模拟器需要 Firebase v8 与angular/fire6.1.0端口约定Firestore8080、Auth9099、Functions5001、Database9000与firebase.json保持一致环境隔离通过environment.useEmulators标志控制是否启用模拟器连接避免误连生产环境按需升级旧版本请升级以获得统一的USE_EMULATOR令牌与NEW_ORIGIN_BEHAVIOR支持。本地模拟器是原型开发与集成测试的得力工具结合上述配置即可在不消耗真实 Firebase 配额的前提下快速迭代你的 Angular 应用。赞分享后端【免费下载链接】angularfireAngular Firebase ❤️项目地址https://gitcode.com/gh_mirrors/an/angularfire点击查看免费下载相关推荐AngularFire 连接 Firebase Emulator Suite 完全指南从 DI Token 配置到本地原型开发AngularFire 连接 Firebase Emulator Suite 完全指南从 DI Token 配置到本地原型开发 本指南讲解如何通过 angu后端SmartTube完整指南在Android TV上打造纯净YouTube观影体验SmartTube完整指南在Android TV上打造纯净YouTube观影体验 想要在电视大屏上享受无广告、无干扰的YouTube观看体验吗SmartTu音视频客户端终极B站会员购抢票神器biliTickerBuy免费抢票工具3步搞定漫展门票终极B站会员购抢票神器biliTickerBuy免费抢票工具3步搞定漫展门票 biliTickerBuy是一款开源免费、简单易用的B站会员购辅助工具专为示例工程上一篇social-auto-upload性能优化技巧提升上传速度和成功率的终极指南下一篇Akka.NET构建高并发分布式应用的.NET利器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考