Angular 12中结合<router-outlet>实现路由懒加载的方案咨询

在Angular 12中使用命名<router-outlet>复用组件时，因组件数量多、单组件依赖繁杂导致页面加载过重，尝试通过懒加载优化但当前配置存在问题，无法正常生效。

1. 修正父路由配置错误 #

当前路由中loadChildren与outlet的配置方式有误，需调整路由结构，确保命名出口的路由规则正确关联懒加载模块：

// routing.module.ts
const routes: Routes = [
  {
    path: 'activity',
    component: CreateComponent,
    children: [
      {
        path: ActivityKeyIDEnum.MOBILE_COMBUSTION,
        children: [
          {
            path: 'create',
            // 确保模块导入路径正确，指向懒加载模块文件
            loadChildren: () => import('../dashboard/menu-page.module').then(m => m.MenuPageModule),
            outlet: 'activityConfig'
          },
          {
            path: 'update',
            loadChildren: () => import('../dashboard/menu-page.module').then(m => m.MenuPageModule),
            outlet: 'activityConfig'
          }
        ],
        data: { activityKeyID: "MenuPageComponent2" }
      }
    ]
  }
];

2. 确认懒加载模块路由配置 #

MenuPageRoutingModule的空路径配置可正确匹配父路由的create/update路径，无需修改，但需注意模块命名一致性：

// MenuPageRoutingModule.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CreateUpdateComponent } from './create-update.component';

const routes: Routes = [
  {
    path: '',
    component: CreateUpdateComponent,
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MenuPageRoutingModule { }

3. 模块导入注意事项 #

• 父模块中禁止提前导入MenuPageModule，否则Angular会将其打包进主chunk，懒加载失效
• 检查import相对路径，避免因路径错误导致模块无法加载

1. 拆分细粒度特性模块 #

若MenuPageModule包含多个子组件，可进一步拆分为更小的特性模块（如表单模块、列表模块），实现更精准的按需加载。

2. 配置预加载策略 #

对用户高频访问的模块，可配置预加载策略，在页面空闲时提前加载，提升后续操作流畅度：

// 根路由模块中配置
RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules // 也可自定义预加载规则
})

3. 组件级懒加载（非路由场景） #

对非路由触发的组件，可通过动态加载方式实现懒加载：

import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

constructor(private cfr: ComponentFactoryResolver, private vcr: ViewContainerRef) {}

loadTargetComponent() {
  import('./target-lazy.component').then(module => {
    const factory = this.cfr.resolveComponentFactory(module.TargetLazyComponent);
    this.vcr.createComponent(factory);
  });
}

4. 清理冗余依赖 #

检查MenuPageModule的导入项，移除重复依赖（如重复导入的MatFormFieldModule），减少打包体积：

// MenuPageModule.ts 修正后的imports
imports: [
  CommonModule,
  MenuPageRoutingModule,
  MatCardModule,
  MatRadioModule,
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
  NgxMatSelectSearchModule,
  FormsModule,
  ReactiveFormsModule
]

打开浏览器开发者工具的Network标签，切换路由时观察是否有新的chunk文件加载，以此确认懒加载是否正常生效。

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