恒美微站 Logo 恒美微站
  • 首页
  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心
  • 联系我们

NgRx Router Store 安装指南:使用 `ng add` 与手动方式快速接入

  • 首页
  • 资讯中心
  • /
  • NgRx Router Store 安装指南:使用 `ng add` 与手动方式快速接入

相关资讯

5分钟上手Observal:从本地部署到看到第一条AI会话追踪的完整快速入门教程 2026/9/27 0:43:34
GPT-4是如何切分文本的?How to Train Your GPT详解BPE分词器的完整原理 2026/9/27 0:43:34
wasm3 可挂起执行与快照(Snapshots)实战指南:`--snapshot` / `--resume` 的中断恢复、Gas 检查点与跨架构续跑 2026/9/27 0:43:34

最新资讯

柳州网站建设33实战:用免费工具搞定网站被黑挂马的SEO自救
Corundum开源100G网卡跨平台移植:从Xilinx到Intel Agilex 7实践
MATLAB中DNN-SHAP实现回归预测与特征贡献解释
Android 12蓝牙权限与HCI链路排查:从btsnoop到BLE扫描实战
计算机毕业设计选题指南:从选题逻辑到技术落地全解析
射频天线工程师面试核心:从麦克斯韦方程到天线测试全解析

今日推荐

从像素到笔画:srt-whiteboard-animation骨架笔迹追踪实现(Zhang-Suen细化+8邻接追踪)
网站建设的英语怎么说?别只背单词,看完这套安全完整流程才敢上线
新手入门看这篇:建设网站加盟避坑指南与SEO实操

本周热门

从像素到笔画:srt-whiteboard-animation骨架笔迹追踪实现(Zhang-Suen细化+8邻接追踪)
网站建设的英语怎么说?别只背单词,看完这套安全完整流程才敢上线
新手入门看这篇:建设网站加盟避坑指南与SEO实操

本月精选

自研推理加速器Redwood:两周内实现PyTorch模型高效部署的实战教程
V4L2摄像头采集实战:从camera_client.rar到出图全流程解析
从“谁发明了钢琴键”到知识问答智能体:RAG与记忆工程实践

NgRx Router Store 安装指南:使用 `ng add` 与手动方式快速接入

发布时间:2026/9/27 0:43:34
NgRx Router Store 安装指南:使用 `ng add` 与手动方式快速接入 前端状态管理【免费下载链接】platformReactive State for Angular项目地址https://gitcode.com/gh_mirrors/pl/platform点击查看免费下载导读ngrx/router-store是 NgRx 生态中连接 Angular Router 与 Store 的核心绑定库它通过监听路由事件并把路由状态同步进 Redux 式的 Store让路由导航可以被 reducer、effect 统一管理。本文围绕 projects/www/src/app/pages/guide/router-store/install.md 讲解两种安装方式推荐的一行命令ng add会自动完成依赖安装与代码注入以及完全手动安装的流程并结合仓库源码揭示每一步背后的实际改动帮助你理解安装之后项目里到底发生了什么。方式一使用ng add自动安装推荐ng add是 Angular CLI 提供的一键集成机制。在项目根目录执行以下命令即可安装最新版的 Router Storeng add ngrx/router-storelatest命令背后的逻辑定义在仓库的 ng-add 示意图modules/router-store/schematics/ng-add/index.ts中并由 collection.json 注册为ng-add别名init示意图。示意图会依次完成三件事更新package.jsondependencies把ngrx/router-store加入项目依赖。从源码看这一步由addNgRxRouterStoreToPackageJson()函数实现写入的版本号取自当前的platformVersion即与 ngrx/router-store 包自身版本一致当前仓库版本为 22.0.1见 package.json。运行npm install示意图通过NodePackageInstallTask触发实际的依赖安装无需你手动执行。默认向app.config.ts的ApplicationConfig注入provideRouterStore()在 standalone 应用下示意图定位项目入口文件的 bootstrap 配置把provideRouterStore()添加进 providers 数组。snapshot 测试 index.spec.ts.snap 展示了注入后的预期结果import { ApplicationConfig, provideBrowserGlobalErrorListeners } from angular/core; import { provideRouterStore } from ngrx/router-store; export const appConfig: ApplicationConfig { providers: [ provideBrowserGlobalErrorListeners(), provideRouterStore() ] };如果你指定了--module/--path等 flags示意图会按 flags 定位到对应的 NgModule 或配置文件并完成更新。可选ng addflagsflagdescription功能说明value type值类型default value默认值--path指定要添加StoreRouterConnectingModule导入的模块所在路径示意图解析后的源码相对路径。string无默认使用当前工作目录--projectangular.json中定义的项目名称用于帮助定位要添加StoreRouterConnectingModule的模块。string无使用默认项目--module包含目标模块的文件名可携带相对路径例如src/app/app.module.ts。stringapp这三个 flag 与 schema 定义一一对应schema.json 中path使用$source: workingDirectory获取默认值project有别名pmodule有别名m且默认值为app此外 schema 还暴露了一个文档未展开的隐藏 flag--skipPackageJson布尔值默认false用于跳过对package.json的自动修改。示意图的底层处理逻辑NgModule 与 Standalone 两条分支从 ng-add 示意图 可以看到示意图启动时会先判断应用是否为 standalone通过isStandaloneApp检查入口文件然后选择两条注入路径Standalone 应用走addStandaloneConfig(options)如果provideRouterStore已在入口配置中调用则直接跳过避免重复注入否则调用addFunctionalProvidersToStandaloneBootstrap将其写入 bootstrap providers。NgModule 应用走addImportToNgModule(options)它通过 TypeScript AST 解析目标模块文件插入import { StoreRouterConnectingModule } from ngrx/router-store并把StoreRouterConnectingModule.forRoot()追加到模块的imports数组见 index.ts。该逻辑有完整的单元测试覆盖见 ng-add/index.spec.ts测试验证了package.json会被更新、skipPackageJson: true时跳过更新、默认注入StoreRouterConnectingModule.forRoot()、指定module时可精确注入、目标模块不存在时报错以及 standalone 应用的 snapshot 注入结果。provideRouterStore()与StoreRouterConnectingModule的关系无论哪种注入方式最终落地的都是同一套 providers。StoreRouterConnectingModule.forRoot()内部只是封装了provideRouterStore(config)并把它作为 module providers 返回见 router_store_module.ts二者等价因此// NgModule 方式 imports: [StoreRouterConnectingModule.forRoot()] // Standalone 方式 providers: [provideRouterStore()]provideRouterStore()的实现位于 provide_router_store.ts它根据配置自动选择合适的序列化器默认使用MinimalRouterStateSerializerrouterState为Full时改用FullRouterStateSerializer并注册StoreRouterConnectingService在应用初始化阶段连接 Router 与 Store。一个完整的 standalone 注册示例bootstrapApplication(AppComponent, { providers: [ provideStore({ router: routerReducer }), provideRouterStore(), ], });方式二手动安装如果你的项目不便使用ng add例如 CI 环境、自定义构建流程或希望完全掌控每个文件也可以手动完成安装。首先使用包管理器安装依赖安装命令取决于项目所用工具# 使用 npm npm install ngrx/router-store # 使用 Yarn yarn add ngrx/router-store # 使用 pnpm当前仓库使用 pnpm workspace参见 pnpm-workspace.yaml pnpm add ngrx/router-store注意ngrx/router-store依赖ngrx/store与 Angular Router 相关包。当前仓库 package.json 声明了 peerDependenciesangular/common、angular/core、angular/router均为^22.0.0、ngrx/store22.0.1以及rxjs ^6.5.3 || ^7.5.0请确保你的项目满足这些版本要求。装完依赖后需要把路由状态接入 Store// NgModule 方式 import { StoreModule } from ngrx/store; import { RouterModule } from angular/router; import { StoreRouterConnectingModule } from ngrx/router-store; NgModule({ imports: [ StoreModule.forRoot({}), RouterModule.forRoot([ { path: , component: SimpleCmp }, { path: next, component: SimpleCmp }, ]), StoreRouterConnectingModule.forRoot(), ], }) export class AppModule {}// Standalone 方式 import { provideStore } from ngrx/store; import { provideRouterStore } from ngrx/router-store; export const appConfig: ApplicationConfig { providers: [ provideStore(), provideRouterStore(), ], };安装后验证安装完成后可以检查以下位置确认集成成功package.jsondependencies中出现ngrx/router-store: 22.0.1版本以实际安装为准。配置入口standalone 应用检查app.config.ts中是否出现provideRouterStore()NgModule 应用检查根模块imports中是否有StoreRouterConnectingModule.forRoot()。类型层面若项目启用了strict模式编译不报错即说明序列化器与 provider 类型已正确接入。可结合仓库中的示例应用参考完整集成形态例如 modules/router-store/src/provide_router_store.ts 中provideRouterStore的usageNotes示例以及 standalone-app 中的实际注册方式。小结对比维度ng add自动安装手动安装依赖更新自动写入 package.json 并运行 npm install需要手动执行安装命令代码注入自动注入provideRouterStore()/forRoot()需要手写 provider 与模块导入适用场景新项目、快速接入受控环境、CI、精细化管理对于绝大多数场景推荐使用ng add ngrx/router-storelatest完成安装再由示意图自动生成的provideRouterStore()将 Angular Router 与 Store 无缝连接起来。如果你需要更细粒度的路由序列化与状态同步配置可在此基础上继续阅读 router-store 相关的 configuration 与 serializer 文档。赞分享前端状态管理【免费下载链接】platformReactive State for Angular项目地址https://gitcode.com/gh_mirrors/pl/platform点击查看免费下载相关推荐NgRx Store Devtools 安装指南ng add 自动配置与手动接入全解析NgRx Store Devtools 安装指南 ng add 自动配置与手动接入全解析 NgRx Store Devtools 是 NgRx 官方为 Ang前端状态管理NgRx Operators 安装指南通过 ng add 与手动方式引入 ngrx/operatorsNgRx Operators 安装指南通过 ng add 与手动方式引入 ngrx/operators 本指南围绕 NgRx 生态中 ngrx/opera前端状态管理NgRx Store 安装指南ng add 自动化配置与手动安装完全手册NgRx Store 安装指南ng add 自动化配置与手动安装完全手册 导读 本篇指南聚焦 Angular 反应式状态管理库 NgRx Store 的两种安前端状态管理创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于恒美微站

恒美微站专注于为个体商户、工作室提供极简自助建站服务,让每个人都能轻松拥有专业网站。

快速链接

  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心

服务项目

  • 可视化建站
  • 拖拽编辑
  • 主题定制
  • SEO 优化
  • 网站托管

联系方式

  • 📍 地址:北京市朝阳区建国路 88 号
  • 📞 电话:400-888-8888
  • ✉️ 邮箱:info@hmyw.cn
  • 🕐 时间:周一至周日 9:00-18:00

© 2024 恒美微站 hmyw.cn 版权所有 | 京 ICP 备 12345678 号