Angular自定义/延迟Lazy PreloadingStrategy错误

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后5s。但是在几个路径改变之后，注册/加载将重新运行，就像角度没有保存模块conf一样。

试图调试角度核心源没有成功。

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

Answer 1

问题是map正在返回一个新的内部Observable，其中angular不知道该怎么做。

你应该使用switchMap或flatMap来解决这个问题。