Angular中如何将基于NgModule的懒加载转为独立组件实现

我已将所有组件转换为独立组件，但部分场景下未移除模块，而是在空模块中导入主组件：

@NgModule({
  imports: [
    MyComponent,
  ],
})
export class MyModule {}

原因是我有一个通过按钮触发的批量流程，该流程需要其他组件的内容，我希望仅在流程启动时懒加载这些组件，而非加载按钮时就加载。目前我通过以下方式手动加载模块：

from(import('./path-to-module/my-module.module')).pipe(
  switchMap(({ MyModule}) =>
    of(createNgModule(MyModule, this.injector))
  )
);

请问如何修改代码，直接使用独立组件而非这些空模块来实现该功能？

• 直接懒加载独立组件本身，无需依赖空模块。利用ES动态导入语法直接加载组件，示例代码：

  from(import('./path-to-component/my-component.component')).pipe(
    switchMap(({ MyComponent }) => {
      // 结合ViewContainerRef创建组件实例（需提前获取对应容器引用）
      const componentRef = this.viewContainerRef.createComponent(MyComponent);
      // 按需设置组件输入属性
      // componentRef.instance.someInput = yourValue;
      return of(componentRef);
    })
  );
  

• 若需要自定义注入上下文，可在创建组件时传入指定注入器：

  from(import('./path-to-component/my-component.component')).pipe(
    switchMap(({ MyComponent }) => {
      const componentRef = this.viewContainerRef.createComponent(MyComponent, {
        injector: this.injector // 使用当前上下文注入器，或自定义注入器实例
      });
      return of(componentRef);
    })
  );
  

• 完成代码调整后，直接删除那些仅导入独立组件的空模块，清除冗余代码。

通过上述方式，就能实现仅在批量流程启动时才懒加载目标独立组件，避免按钮加载阶段提前加载组件资源。

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