无需路由实现Angular NgModule懒加载的可行方案？

针对你提到的场景——桌面端滚动展示区块、移动端切换页面，且希望通过懒加载优化包体积的需求，Angular有几种可行的实现方式：

1. 动态组件加载（Dynamic Component Loading） #

这种方式无需依赖路由，直接通过ViewContainerRef和动态import()语法加载组件，打包时会将组件拆分为独立chunk，仅在需要时加载。

实现步骤： #

• 不在Mobile NgModule的declarations中声明三个页面组件，保持组件的独立性。
• 在移动端父组件中通过动态加载的方式渲染组件：

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

@Component({
  selector: 'app-mobile-checkout',
  template: `
    <div #componentHost></div>
    <div class="nav-buttons">
      <button (click)="loadPrevComponent()" [disabled]="currentStep === 0">上一步</button>
      <button (click)="loadNextComponent()" [disabled]="currentStep === 2">下一步</button>
    </div>
  `
})
export class MobileCheckoutComponent {
  @ViewChild('componentHost', { read: ViewContainerRef }) componentHost!: ViewContainerRef;
  currentStep = 0;
  // 定义组件加载器数组，每个元素返回组件类的Promise
  componentLoaders = [
    () => import('./slot-tickets/slot-tickets.component').then(m => m.SlotTicketsComponent),
    () => import('./your-details/your-details.component').then(m => m.YourDetailsComponent),
    () => import('./payment/payment.component').then(m => m.PaymentComponent)
  ];

  async ngOnInit() {
    // 初始化加载第一个组件
    await this.loadCurrentComponent();
  }

  private async loadCurrentComponent() {
    this.componentHost.clear();
    const ComponentClass = await this.componentLoaders[this.currentStep]();
    this.componentHost.createComponent(ComponentClass);
  }

  async loadNextComponent() {
    if (this.currentStep < 2) {
      this.currentStep++;
      await this.loadCurrentComponent();
    }
  }

  async loadPrevComponent() {
    if (this.currentStep > 0) {
      this.currentStep--;
      await this.loadCurrentComponent();
    }
  }
}

优势：轻量化，无需额外模块配置，适合依赖简单的组件。

2. 特征模块懒加载（Lazy-Load Feature Modules） #

如果页面组件有复杂依赖（如表单、自定义指令等），可以将每个组件封装到独立的特征模块中，再动态加载整个模块。

实现步骤： #

• 为每个页面组件创建特征模块（以SlotTickets为例）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlotTicketsComponent } from './slot-tickets.component';
import { ReactiveFormsModule } from '@angular/forms'; // 假设组件依赖表单模块

@NgModule({
  declarations: [SlotTicketsComponent],
  imports: [CommonModule, ReactiveFormsModule],
  exports: [SlotTicketsComponent]
})
export class SlotTicketsModule {}

• 在父组件中动态加载模块并渲染组件：

import { Component, ViewChild, ViewContainerRef, Compiler, Injector, NgModuleRef } from '@angular/core';
import { SlotTicketsComponent } from './slot-tickets/slot-tickets.component';
import { YourDetailsComponent } from './your-details/your-details.component';
import { PaymentComponent } from './payment/payment.component';

@Component({
  selector: 'app-mobile-checkout',
  template: `
    <div #moduleHost></div>
    <button (click)="switchModule(0)">选择场次</button>
    <button (click)="switchModule(1)">填写信息</button>
    <button (click)="switchModule(2)">支付</button>
  `
})
export class MobileCheckoutComponent {
  @ViewChild('moduleHost', { read: ViewContainerRef }) moduleHost!: ViewContainerRef;
  moduleRefs: NgModuleRef<any>[] = [];

  constructor(private compiler: Compiler, private injector: Injector) {}

  async switchModule(index: number) {
    // 清除之前加载的模块和组件
    this.moduleHost.clear();
    this.moduleRefs.forEach(ref => ref.destroy());

    // 根据索引加载对应模块
    let moduleLoader;
    switch(index) {
      case 0:
        moduleLoader = () => import('./slot-tickets/slot-tickets.module').then(m => m.SlotTicketsModule);
        break;
      case 1:
        moduleLoader = () => import('./your-details/your-details.module').then(m => m.YourDetailsModule);
        break;
      case 2:
        moduleLoader = () => import('./payment/payment.module').then(m => m.PaymentModule);
        break;
      default:
        return;
    }

    const ModuleClass = await moduleLoader();
    const moduleFactory = await this.compiler.compileModuleAsync(ModuleClass);
    const moduleRef = moduleFactory.create(this.injector);
    this.moduleRefs.push(moduleRef);

    // 获取组件工厂并渲染
    const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(
      index === 0 ? SlotTicketsComponent : index ===1 ? YourDetailsComponent : PaymentComponent
    );
    this.moduleHost.createComponent(componentFactory, 0, moduleRef.injector);
  }
}

优势：可以将组件的依赖封装在模块内，代码隔离性更好，适合复杂场景。

3. 内部路由懒加载（Router Outlet + 无URL变更） #

虽然你不想设置独立的外部路由，但可以利用Angular的内部嵌套路由，结合skipLocationChange避免URL变化，同时实现懒加载。

实现步骤： #

• 在Mobile NgModule中配置嵌套路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MobileCheckoutComponent } from './mobile-checkout.component';

const routes: Routes = [
  {
    path: '',
    component: MobileCheckoutComponent,
    children: [
      { path: '', loadChildren: () => import('./slot-tickets/slot-tickets.module').then(m => m.SlotTicketsModule) },
      { path: 'details', loadChildren: () => import('./your-details/your-details.module').then(m => m.YourDetailsModule) },
      { path: 'payment', loadChildren: () => import('./payment/payment.module').then(m => m.PaymentModule) }
    ]
  }
];

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

• 在MobileCheckoutComponent模板中添加router-outlet，并通过路由导航切换页面：

<router-outlet></router-outlet>
<div class="nav">
  <button (click)="navigateTo('')" *ngIf="currentRoute !== ''">返回场次选择</button>
  <button (click)="navigateTo('details')" *ngIf="currentRoute === ''">下一步</button>
  <button (click)="navigateTo('payment')" *ngIf="currentRoute === 'details'">下一步</button>
</div>

• 组件内的导航逻辑：

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-mobile-checkout',
  templateUrl: './mobile-checkout.component.html'
})
export class MobileCheckoutComponent {
  currentRoute = '';

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {
    this.activatedRoute.firstChild?.url.subscribe(urlSegments => {
      this.currentRoute = urlSegments.join('/');
    });
  }

  navigateTo(path: string) {
    // 使用skipLocationChange避免URL变化
    this.router.navigate([path], { relativeTo: this.activatedRoute, skipLocationChange: true });
  }
}

优势：贴合Angular路由生态，路由导航逻辑更规范，维护成本低，同时保留懒加载能力。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan