Angular 17如何懒加载独立式共享组件？

在Angular 14及以上版本中，针对独立式共享组件的非路由场景懒加载，有两种简便可行的实现方式：

方法一：动态导入 + ViewContainerRef手动挂载 #

适合需要精细控制组件实例（比如传递复杂输入、监听输出事件）的场景：

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

@Component({
  selector: 'app-host',
  template: `
    <button (click)="loadSharedComponent1()">加载共享组件1</button>
    <div #componentContainer></div>
  `
})
export class HostComponent {
  constructor(private vcr: ViewContainerRef) {}

  async loadSharedComponent1() {
    // 清空容器，避免重复加载多个实例
    this.vcr.clear();
    // 动态导入独立组件（路径需根据实际项目结构调整）
    const { SharedComponent1 } = await import('../modules/shared/components/shared-component1.component');
    // 创建组件实例并挂载到容器
    const componentRef = this.vcr.createComponent(SharedComponent1);
    
    // 示例：传递输入属性
    componentRef.instance.title = '懒加载的组件';
    // 示例：监听输出事件
    componentRef.instance.onSubmit.subscribe((data: any) => {
      console.log('组件输出的数据:', data);
    });
  }
}

方法二：NgComponentOutlet + 动态导入 #

适合快速实现懒加载，无需手动管理组件实例的场景：

import { Component } from '@angular/core';
import { NgComponentOutlet } from '@angular/common';

@Component({
  selector: 'app-host',
  template: `
    <button (click)="loadSharedComponent2()">加载共享组件2</button>
    <ng-container *ngComponentOutlet="lazyLoadedComponent; inputs: { subtitle: '通过NgComponentOutlet传入' }"></ng-container>
  `,
  imports: [NgComponentOutlet]
})
export class HostComponent {
  lazyLoadedComponent: any;

  async loadSharedComponent2() {
    // 动态导入目标组件
    const { SharedComponent2 } = await import('../modules/shared/components/shared-component2.component');
    this.lazyLoadedComponent = SharedComponent2;
  }
}

关键注意事项 #

• 确保所有懒加载的共享组件都标记为standalone: true，并且组件依赖的指令、管道、模块已在其@Component的imports数组中声明。
• 动态导入的文件路径要准确，Angular打包工具会自动将懒加载组件拆分为独立的chunk文件，实现真正的按需加载。
• 若需避免重复加载同一组件，可将导入后的组件类型缓存到类变量或服务中，触发加载时直接复用。

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