Angular custom/delayed 延迟预加载策略错误

Question

我无法理解为什么我的预加载策略在模块已经加载后仍被多次注册和加载...

来自 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 5 秒后按预期调用。但是换了几个路由后，registering/loading会重新运行，就好像angular没有保存modules conf.

尝试调试 angular 核心源代码但未成功。

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

Answer 1

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

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

Angular custom/delayed 延迟预加载策略错误

Angular custom/delayed Lazy PreloadingStrategy bug

lazy-loading

rxjs

angular