Angular8 + UI-Router懒加载模块能否触发预加载？

当然可以实现！针对你用Angular 8 + UI-Router Future States实现懒加载的场景，有几种靠谱的预加载方案能让UserModule在初始页面加载时就提前备好，这样用户访问/users时就不会再有等待加载的延迟了：

这个方案会在应用初始化阶段就触发模块加载，适合希望模块和首屏资源一起加载的场景：

在你的根模块（比如AppModule）中配置APP_INITIALIZER，把预加载逻辑绑定到应用启动流程里：

import { NgModule, APP_INITIALIZER } from '@angular/core';

// 定义预加载函数，直接调用你的懒加载逻辑
export function preloadUserModule() {
  return () => import("../user.module").then((m) => m.UserModule);
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: preloadUserModule,
      multi: true, // 允许同时配置多个初始化器
    }
  ]
})
export class AppModule { }

配置完成后，应用启动时就会自动发起请求加载UserModule的chunk文件，等用户访问/users时，模块已经完全加载好了。

如果你不想让预加载影响首屏渲染速度，可以用UI-Router的API在应用初始化完成后再触发加载：

首先创建一个专门的预加载服务：

import { Injectable } from '@angular/core';
import { UIRouter } from '@uirouter/angular';

@Injectable()
export class PreloadService {
  constructor(private router: UIRouter) {}

  preloadUserModule() {
    // 找到你定义的future state
    const targetState = this.router.stateRegistry.get('app.users.**');
    if (targetState?.loadChildren) {
      // 调用loadChildren触发模块加载
      targetState.loadChildren();
    }
  }
}

然后在AppComponent的初始化钩子中调用这个服务：

import { Component, OnInit } from '@angular/core';
import { PreloadService } from './preload.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private preloadService: PreloadService) {}

  ngOnInit() {
    // 首屏渲染完成后，后台悄悄加载UserModule
    this.preloadService.preloadUserModule();
  }
}

这种方式不会阻塞应用的初始渲染，用户体验更友好。

如果需要更灵活的加载时机（比如用户滚动到某个位置、点击某个按钮时），可以直接在任意组件/服务中调用懒加载函数：

// 比如在AppComponent中
triggerUserModulePreload() {
  // 直接调用你的懒加载逻辑
  import("../user.module").then((m) => m.UserModule);
}

你可以把这个方法绑定到按钮点击事件，或者在ngAfterViewInit钩子中调用，完全由业务场景决定加载时机。

注意事项 #

• 预加载会增加初始阶段的网络请求和资源占用，如果UserModule体积较大，可能会拖慢首屏加载速度，务必根据实际业务权衡。
• 确保Webpack配置正确，懒生成的chunk文件路径无误，避免预加载时出现404错误。

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