1. 首先，需要将要动态加载的组件放在一个独立的模块中。
2. 然后，在需要动态加载组件的组件中，通过Angular提供的Lazy Loading机制加载该模块。
3. 最后，在加载完毕后，使用ComponentFactoryResolver来动态地加载组件，该方法返回一个ComponentFactory对象，再通过该对象创建组件实例并加入到指定的容器中。

示例代码： //动态加载组件的shell组件 @Component({ selector: 'app-dynamic-host', template: '' }) export class DynamicHostComponent implements OnInit, OnDestroy { @ViewChild('dynamicHost', { read: ViewContainerRef }) dynamicHost; private componentRef;

constructor(private componentFactoryResolver: ComponentFactoryResolver, private moduleService: DynamicLoadingService) { }

ngOnInit() { // 懒加载组件模块 this.moduleService.loadModule('path/to/your/module').then(moduleFactory => { const moduleRef = moduleFactory.create(this.dynamicHost.injector); const componentType = moduleRef.instance.someComponent; const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType); this.componentRef = this.dynamicHost.createComponent(componentFactory); }); }

ngOnDestroy() { this.componentRef.destroy(); } }

//动态加载组件的服务 @Injectable() export class DynamicLoadingService {

constructor(private compiler: Compiler) { }

public loadModule(path: string): Promise> { return SystemJS.import(path).then((module: any) => { return this.compiler.compileModuleAsync(module.default); }); }

}