Angular 15无NgModule环境下如何配置预加载特性路由（不修改main.ts）

方案1：针对特定路由预加载（自定义策略） #

1. 给特性路由添加预加载标记
   在你的特性路由文件（比如product.routes.ts）中，给需要预加载的懒加载路由添加data: { preload: true }配置：

import { Routes } from '@angular/router';

export const productRoutes: Routes = [
  {
    path: 'products',
    // 独立模式下的懒加载组件写法
    loadComponent: () => import('./product.component').then(m => m.ProductComponent),
    // 标记该路由需要预加载
    data: { preload: true }
  }
];

2. 创建自定义预加载器
   新建custom-preloader.ts文件，实现PreloadingStrategy接口：

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

@Injectable({ providedIn: 'root' })
export class CustomPreloader implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 仅对带有preload标记的路由执行预加载
    return route.data?.['preload'] ? load() : of(null);
  }
}

3. 添加应用初始化器
   新建preloader-initializer.ts文件，创建初始化器动态设置预加载策略：

import { Injectable, APP_INITIALIZER } from '@angular/core';
import { Router } from '@angular/router';
import { CustomPreloader } from './custom-preloader';

@Injectable({ providedIn: 'root' })
export class PreloaderInitializer {
  constructor(private router: Router, private customPreloader: CustomPreloader) {}

  initialize(): void {
    // 替换路由默认的预加载策略
    this.router.preloadingStrategy = this.customPreloader;
  }
}

// 定义初始化提供者
export const PRELOADER_INITIALIZER = {
  provide: APP_INITIALIZER,
  useFactory: (initializer: PreloaderInitializer) => () => initializer.initialize(),
  deps: [PreloaderInitializer],
  multi: true
};

4. 注册初始化器
   在你的根组件（比如AppComponent，独立组件）的providers数组中添加初始化器即可：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PRELOADER_INITIALIZER } from './preloader-initializer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [RouterOutlet],
  // 注册预加载初始化器
  providers: [PRELOADER_INITIALIZER]
})
export class AppComponent {}

方案2：预加载所有懒加载路由 #

如果不需要针对特定路由，而是预加载所有懒加载路由，步骤更简洁：

1. 创建初始化器
   修改preloader-initializer.ts，直接使用Angular内置的PreloadAllModules：

import { Injectable, APP_INITIALIZER } from '@angular/core';
import { Router, PreloadAllModules } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class PreloaderInitializer {
  constructor(private router: Router) {}

  initialize(): void {
    this.router.preloadingStrategy = PreloadAllModules;
  }
}

export const PRELOADER_INITIALIZER = {
  provide: APP_INITIALIZER,
  useFactory: (initializer: PreloaderInitializer) => () => initializer.initialize(),
  deps: [PreloaderInitializer],
  multi: true
};

2. 注册初始化器
   同样在根组件的providers中添加PRELOADER_INITIALIZER即可，无需改动main.ts。

关键说明 #

• 这种方式利用Angular的APP_INITIALIZER在应用启动时动态修改路由预加载策略，完全不需要修改main.ts中的路由配置代码。
• 独立模式下无需依赖NgModule，所有配置通过独立组件和根注入的服务完成。

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