为什么每次访问Angular懒加载模块页面时NgRx Store都会重新初始化

问题根源 #

1. 路由拼写错误触发整页刷新：shoeSalesRoutingModule 中重定向路径写为 /shoesSales/buy，比实际路由前缀 shoeSales 多了一个字母s，路由匹配失败后触发浏览器整页加载，而非Angular客户端路由跳转，直接导致AppComponent重复初始化、loadChildren重复执行、Store状态完全重置。
2. 懒加载模块错误调用EffectsModule.forRoot：forRoot方法仅可在根模块AppModule中调用一次，懒加载模块中调用forRoot会在每次模块加载时重新注册根级Effects实例，触发Store重初始化。

修复步骤 #

1. 修正路由拼写
   修改shoeSalesRoutingModule.ts中的重定向路径：

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        // 移除多余的s，改为正确路径
        redirectTo: '/shoeSales/buy'
    },
    {
        path: 'buy',
        component: BuyComponent
    },
    {
        path: 'finalize-purchase',
        component: FinalizePurchaseComponent
    }
]

2. 调整Effects注册方式
   将shoeSalesModule.ts中的EffectsModule.forRoot改为forFeature，适配懒加载模块的Effects注册规则：

@NgModule({
    imports: [
        // 其余引入不变
        StoreModule.forFeature('shoeSalesFeatureKey', shoeSalesReducer),
        // 把forRoot替换为forFeature
        EffectsModule.forFeature([shoeSalesEffects]),
    ]
})
export class shoeSalesModule { }

3. 可选校验
   检查shoeSalesAppStoreModule的内部实现，确认其中没有StoreModule.forRoot或EffectsModule.forRoot调用，仅包含特征模块相关的forFeature逻辑。

验证标准 #

修改完成后测试：

• 首次进入/shoeSales路径时控制台仅打印一次loading children
• 模块内子页面跳转时AppComponent构造函数不会重复触发
• Store中shoeSalesFeatureKey对应的状态在导航时不会重置

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