如何在Angular的HTML模板中实现组件懒加载且尽量不修改原有代码

可行方案共有两种，都不会大幅改动你现有的component-a代码： #

方案1：使用代理壳组件（兼容Angular所有支持动态加载的版本） #

此方案可以做到component-a的HTML一行都不用改，仅需要新增两个代理组件即可：

1. 先将ComponentB、ComponentC设置为独立组件，或者封装到单独的NgModule中，确保它们没有被任何预加载的模块引入。
2. 新建和原有组件选择器完全一致的代理壳组件，逻辑仅负责组件加载和属性透传，示例代码如下：

// component-b.proxy.ts
import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef, OnInit, OnChanges } from '@angular/core';

@Component({
  selector: 'app-component-b', // 和你原有组件的选择器完全相同
  template: `<ng-container #container></ng-container>`
})
export class ComponentBProxy implements OnInit, OnChanges {
  // 原样复制原有ComponentB的所有Input、Output
  @Input() title: string;
  @Input() config: any;
  @Output() submit = new EventEmitter<void>();

  @ViewChild('container', {read: ViewContainerRef, static: true}) private container: ViewContainerRef;
  private compInstance: any;

  async ngOnInit() {
    // 初始化时才加载实际的ComponentB代码
    const { ComponentB } = await import('./component-b.component');
    const compRef = this.container.createComponent(ComponentB);
    this.compInstance = compRef.instance;
    // 透传初始Input值
    this.syncInputs();
    // 透传Output事件
    this.compInstance.submit.subscribe(e => this.submit.emit(e));
  }

  ngOnChanges() {
    // Input变更时同步给实际组件
    if (this.compInstance) this.syncInputs();
  }

  private syncInputs() {
    this.compInstance.title = this.title;
    this.compInstance.config = this.config;
  }
}

3. 将代理组件注册到ComponentA所在的模块中即可，原有模板的<app-component-b>、<app-component-c>标签完全不用修改，只有当ComponentA渲染触发代理组件初始化时，才会加载实际组件的代码。

方案2：使用Angular 14+原生@defer语法（改动最小） #

如果你的项目Angular版本≥14，直接用原生提供的懒加载块包裹原有组件即可，不需要写任何额外的TS逻辑，仅需修改component-a的少量模板代码：

<h1>Title</h1>
<!-- 支持多种触发条件，viewport代表滚动到组件可见区域时才加载 -->
@defer (on viewport) {
  <app-component-b></app-component-b>
}
@defer (on viewport) {
  <app-component-c></app-component-c>
}

Angular会自动处理组件的懒加载逻辑，只要你确保ComponentB和ComponentC是独立组件、没有被预加载模块引入即可。还支持on idle（浏览器空闲时加载）、on interaction（用户交互时加载）等多种触发规则，可按需选择。

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