Angular 15：从懒加载模块提取组件以实现动态创建

1. 配置懒加载模块的导出规则 #

首先确保OnboardingModule明确导出目标组件，让外部能访问到它：

// onboarding.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OnboardingComponent } from './onboarding.component';

@NgModule({
  declarations: [OnboardingComponent],
  imports: [CommonModule],
  exports: [OnboardingComponent] // 必须导出组件，外部才能获取
})
export class OnboardingModule {
  // 可选：添加静态方法直接返回组件类，简化后续获取逻辑
  static getTargetComponent() {
    return OnboardingComponent;
  }
}

2. 在AppComponent中懒加载模块并提取组件 #

通过import()动态加载模块，再从模块中提取目标组件类：

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { DynamicRendererComponent } from './dynamic-renderer.component';

@Component({
  selector: 'app-root',
  template: `<app-dynamic-renderer #dynamicRenderer></app-dynamic-renderer>`
})
export class AppComponent {
  @ViewChild('dynamicRenderer') dynamicRenderer!: DynamicRendererComponent;
  featureFlag = true; // 你的功能开关标志

  ngOnInit() {
    if (this.featureFlag) {
      // 动态加载Onboarding模块
      import('./onboarding/onboarding.module')
        .then(module => {
          // 方式1：通过模块静态方法获取组件（推荐，更直观）
          const OnboardingComponent = module.OnboardingModule.getTargetComponent();
          
          // 方式2：从模块exports中筛选（如果没写静态方法）
          // const OnboardingComponent = module.OnboardingModule.exports.find(comp => comp.name === 'OnboardingComponent');

          // 将组件类传入动态渲染组件
          this.dynamicRenderer.render(OnboardingComponent);
        })
        .catch(err => console.error('加载Onboarding模块失败', err));
    }
  }
}

3. 实现DynamicRendererComponent的动态渲染逻辑 #

让动态渲染组件接收组件类，直接创建实例并渲染：

// dynamic-renderer.component.ts
import { Component, ViewContainerRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-dynamic-renderer',
  template: `<ng-template #container></ng-template>`
})
export class DynamicRendererComponent {
  @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

  render(componentClass: any) {
    this.container.clear(); // 清空容器避免重复渲染
    // Angular 13+ 支持直接传入组件类创建实例
    this.container.createComponent(componentClass);
  }
}

核心优势说明 #

• 完全不需要将OnboardingModule加入SharedModule，只有当功能标志为true时才会加载对应代码块，彻底避免资源冗余。
• 模块内的服务会随模块一起懒加载，无需全局注册，符合按需加载的设计逻辑。

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