延迟加载 Angular 13+ 个模块，没有弃用的编译器

Question

我与 loading and instantiating Angular modules 有过广泛的合作。（没有路由器）

但是现在有了 Angular13，我看到了对用于实例化 NgModule 的常用编译器工具的弃用：

这是我常用的加载模块的代码

const moduleFactory = await this.compiler.compileModuleAsync(module);
const moduleRef = moduleFactory.create(this.injector);
const componentFactory = moduleRef.instance.resolveComponent(selector);

看得更深 ViewContainerRef 现在包含工厂的 V13 更改使动态组件更容易 1 步。但是，关于 ViewContainerRef.createComponent() 文档指出：

Deprecated Angular no longer requires component factories to dynamically create components. Use different signature of the createComponent method, which allows passing Component class directly.

那么 Angular13+ 中这些任务的新方向是什么？

Answer 1

您可以利用新的 createNgModuleRef 方法并替换以下步骤：

const moduleFactory = await this.compiler.compileModuleAsync(module);
const moduleRef = moduleFactory.create(this.injector);

与

const moduleRef = createNgModuleRef(module, this.injector);

您还可以在 Angular 文档 https://angular.io/guide/deprecations

中阅读所有弃用和可能的替代品

Answer 2

给你导入 ViewContainerRef、Renderer2、Injector

创建内容元素

const messageText = this.renderer.createText('message');

创建组件 ref

const compRef = this.vcr.createComponent(<ComponentClass>, {Injector: this.injector, projectNodes: [[messageText]]});

如果你想要元素

const elem = compRef.location.nativeElement;

Answer 3

不使用工厂，就得用ViewContainerRef.createComponent。参考下面link

延迟加载 Angular 13+ 个模块，没有弃用的编译器

Lazy loading Angular 13+ modules without the deprecated compiler

lazy-loading

lazy-initialization

angular