Angular 17独立组件路由懒加载：如何预加载所有组件？

问题核心 #

原来的PreloadAllModules策略仅针对模块级懒加载（即通过loadChildren定义的路由），对直接使用loadComponent的独立组件路由不起作用，这就是你配置后只有访问对应路由才加载组件包的原因。

解决方案：自定义预加载策略 #

你需要实现PreloadingStrategy接口，扩展预加载逻辑，同时覆盖loadComponent和loadChildren两种懒加载场景：

1. 编写自定义预加载策略

创建一个策略类，遍历所有路由，只要路由包含懒加载的组件或模块，就触发预加载：

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class PreloadAllComponentsAndModules implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 检测路由是否有懒加载的组件或模块
    if (route.loadComponent || route.loadChildren) {
      return load();
    }
    return of(null);
  }
}

2. 替换路由配置中的预加载策略

修改app.config.ts，把原来的PreloadAllModules替换为自定义策略：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withPreloading(PreloadAllComponentsAndModules))
  ]
};

3. 可选：精细化控制预加载

如果需要排除某些路由的预加载，可以给路由添加data标记，比如：

// 路由配置示例
{
  path: "standalone-sample1",
  loadComponent: () =>
    import('./components/standalone-sample1/standalone-sample1.component').then((m) => m.StandaloneSample1Component),
  data: { preload: false } // 标记该路由不预加载
}

然后在自定义策略中加入判断逻辑：

preload(route: Route, load: () => Observable<any>): Observable<any> {
  // 仅预加载未标记排除的懒加载路由
  if ((route.loadComponent || route.loadChildren) && route.data?.preload !== false) {
    return load();
  }
  return of(null);
}

总结 #

目前Angular官方没有提供直接适配独立组件的预加载策略，自定义PreloadingStrategy是最直接的解决方案，能同时覆盖独立组件和模块的懒加载预加载需求。

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