角度自定义/延迟延迟预加载策略错误答案

【问题标题】：Angular custom/delayed Lazy PreloadingStrategy bug角度自定义/延迟延迟预加载策略错误
【发布时间】：2018-03-12 10:10:26
【问题描述】：

我不明白为什么我的预加载策略即使在模块已经加载后也会被注册和加载多次......

来自 Angular 源的标准 PreloadAllModules 是：

export class PreloadAllModules implements PreloadingStrategy {
    preload(route: Route, fn: () => Observable<any>): Observable<any> {
        console.log('registering preload', route.path);
        function test() {
            console.log('preloading', route.path);
            return fn();
        }
        return _catch.call(test(), () => of(null));
    }
}

在这里，对于我的每个惰性路由，console.log 都只会触发一次，如果我在惰性路由中导航，它永远不会重新运行（正常）。

我的自定义策略，我尝试为其添加最小延迟：

export class PreloadAllModulesWithDelay implements PreloadingStrategy {
    preload(route: Route, fn: () => Observable<any>): Observable<any> {
        console.log('registering preload', route.path);
        return timer(5000).pipe(
            first(),
            map(() => {
                console.log('preloading', route.path);
                return _catch.call(fn(), () => of(null));
            })
        );
    }
}

这里，首先会调用registering 日志，然后在loading 之后的5s 将按预期调用。但是经过几条路线更改后，注册/加载将重新运行，好像 Angular 没有保存模块配置。

尝试调试 Angular 核心源但没有成功。

注意：对于那些想知道的人，我正在创建这种延迟策略，因为角度延迟加载模块太快......它在我的路由器动画仍在执行时加载它们，这会导致 UI 冻结几毫秒（这会中断我的动画的流畅性）..这可能是一个角度错误。

【问题讨论】：

将 map(...) 改为 switchMap(...)
@Miller 谢谢就是这样。将其发布为答案，我很乐意为您提供赏金
完成。谢谢！

标签： angular rxjs lazy-loading

【解决方案1】：

问题在于map 正在返回一个新的内部 Observable，而 Angular 不知道如何处理。

您应该改用switchMap 或flatMap 来解决这个问题。

【讨论】：