Angular 8+NgRx应用无痕模式下路由导航异常缓慢问题排查

我来帮你拆解这个Angular 8 + NgRx的路由导航阻塞问题——无痕模式下耗时50秒，启用Redux DevTools就正常，核心矛盾点在Resolver的Observable流没有及时完成，哪怕API请求已经触发了。下面是大概率的原因和对应的解决办法：

1. Redux DevTools模块在无痕模式下的隐性阻塞 #

你的代码里StoreDevtoolsModule默认在非生产环境启用，但无痕模式下浏览器会禁用扩展，这时候NgRx的DevTools模块可能会在Angular Zone内等待扩展连接，间接卡住了Resolver里的Observable流。

修复方案：
修改StoreDevtoolsModule的配置，明确禁用Zone内的连接等待，同时只在扩展存在时启用模块：

StoreDevtoolsModule.instrument({
  maxAge: 25,
  logOnly: environment.production,
  connectInZone: false, // 关键：避免在Angular Zone内等待DevTools连接
  enabled: !environment.production && !!window.__REDUX_DEVTOOLS_EXTENSION__ // 仅当扩展存在时启用
})

2. Resolver中Observable流的无限等待风险 #

你用merge合并了三个依赖NgRx状态的Observable，每个都靠first()完成。在无痕模式下，可能因为状态更新没有被及时检测到（比如Zone.js变化检测的差异），导致某个Observable的filter条件一直不满足，直到浏览器的隐性超时（刚好50秒）。

排查与优化：

• 先确认三个API请求完成后，对应的reducer是否正确把loaded状态设为true——可以在无痕模式下用console.log打印selector的返回值，看是否一直为false。
• 给每个Observable添加超时处理，避免无限阻塞：

import { timeout, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

const notificationSettingsData$= this.store.pipe(
  select(areNotificationSettingsLoaded),
  tap(notificationSettingsLoaded => {
    if(!notificationSettingsLoaded && !this.loadingNotifications){
      this.loadingNotifications = true;
      this.store.dispatch(loadNotificationSettings({requestParameter :this.notificationsRequest}));
    }
  }),
  filter(loaded => loaded),
  first(),
  timeout(10000), // 10秒超时，避免永久阻塞
  catchError(() => of(true)), // 超时后返回默认值，让Resolver继续
  finalize(()=> this.loadingNotifications = false)
);

另外，Resolver是单例服务，你用实例变量loadingNotifications来控制重复请求，可能会有状态残留问题——建议把loading状态移到NgRx Store里，或者用takeUntil来管理订阅生命周期。

3. 重复导入StoreRouterConnectingModule导致的路由状态异常 #

我注意到你的AppModule里重复导入了两次StoreRouterConnectingModule：

StoreRouterConnectingModule.forRoot({ stateKey: 'router', routerState:RouterState.Minimal }),
// ...
StoreRouterConnectingModule.forRoot(),

重复导入会导致路由状态同步逻辑冲突，在无痕模式下可能加剧状态更新的延迟。

修复方案：
移除其中一个导入，保留配置完整的那一个：

StoreRouterConnectingModule.forRoot({ 
  stateKey: 'router', 
  routerState: RouterState.Minimal 
}),

4. Zone.js在无痕模式下的变化检测延迟 #

无痕模式下浏览器禁用了部分特性，可能导致Zone.js没有及时捕获NgRx状态更新的事件，使得Resolver的Observable无法检测到状态变化。

临时验证方案：
在Resolver的每个Observable里手动触发变化检测（需要注入ChangeDetectorRef），或者确保Action的dispatch在Zone内执行。不过更稳妥的是先解决前面几个明确的问题，再看是否还有这个情况。

验证步骤 #

1. 先修改StoreDevtoolsModule的配置，测试无痕模式下的导航速度——这是最可能解决问题的一步。
2. 给Resolver的Observable添加超时和日志，看哪个流卡住了，定位具体是哪个状态没有更新。
3. 移除重复的StoreRouterConnectingModule导入，确保路由状态同步正常。

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