嵌入第三方网站的多个NgRx应用是否共享同一Store实例？

多个嵌入的NgRx应用共享同一Store实例确实会引发竞争条件，导致刷新时视图异常，具体原因如下：

• NgRx Store的单例特性：默认情况下，NgRx的Store是Angular的根注入单例服务（providedIn: 'root'）。如果多个嵌入页面的应用运行在同一个Angular上下文（比如同域iframe共享全局环境，或者打包时未做模块隔离），它们会共用同一个Store实例。
• 状态竞争与污染：每个嵌入的光伏电站页面都会向Store dispatch动作、订阅状态变更。刷新时，多个页面同时初始化并加载数据，不同页面的action会互相覆盖Store中的状态，导致视图渲染时拿到错误的数据，引发图表显示异常、数据错乱等问题。
• 复现场景的佐证：你提到的Demo能复现该问题，进一步确认了这一机制——当独立应用实例未隔离Store时，跨页面的状态干扰是必然会发生的。

可选解决方向 #

如果需要修复这个问题，可以考虑：

• 为每个嵌入应用创建独立的Store实例：通过自定义StoreModule.forRoot的配置，或者使用独立的注入器（Injector）隔离每个应用的依赖上下文，确保每个iframe内的应用拥有专属的Store。
• 采用微前端架构：比如借助Module Federation等方案，彻底隔离每个应用的运行环境，从根源上避免单例服务共享的问题。

内容的提问来源于stack exchange，提问作者George Knap