如何使用Angular 9（常春藤）动态渲染和加载组件

各位!

我曾经使用ComponentFactoryResolver通过服务按名称加载和呈现我的组件

这是代码的一部分，用于渲染组件的代码

//Get the Type of the component by its string's name
        const type: Type<any> = await this.getTypeOfComponent(component);


        //Call the factory for create the component
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(type);
        const componentRef = componentFactory.create(new DialogInjector(this.injector, data));
        this.appRef.attachView(componentRef.hostView);

        //Attach the component 
        const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
        document.querySelector('.flyout').firstChild.appendChild(domElem);

        this.dialogComponentRef = componentRef;

        return homeRef;

我已经阅读了Ivy的Angular 9，您必须导入组件进行“延迟加载”并渲染组件

例如使用

this.foo = import(`./foo/foo.component`)
                       .then(({ FooComponent }) => FooComponent);

但我无法做到这一点，我总是得到同样的错误，那就是

core.js:5845 ERROR Error: Uncaught (in promise): Error: Cannot find module 'details-products/details-products.component'
Error: Cannot find module 'details-products/details-products.component'

我尝试了很多到组件的路径，但仍然得到相同的错误

有什么想法吗？使用Ivy以Angular 9渲染组件的任何其他方法

编辑：

我尝试过博客上说的导入。例如：

import（'src/app/my component.ts'）

这对我来说很有用，但如果我做下一步：

let src = 'src/app/my-component.ts';
import(src); 

那么这将不起作用，并抛出“找不到模块”错误

---

有什么想法吗

我用一种丑陋的方式解决了我的问题。但我相信这将帮助您找到更好的解决方案：

const object = Array.from(this.componentFactoryResolver['ngModule'].instance.constructor.decorators.values())[0]['args'][0];
const factories = object.declarations.concat(object.entryComponents, object.imports, object.providers);

// const factories = Array.from(this.componentFactoryResolver['_factories'].keys());
const factoryClass = < Type<any> > factories.find((x: any) => x.name === your_component_name);
const factory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
//
const ref = this.dialogService.open(factory.componentType, {
  header: your_component_name,
});

const object=Array.from（this.componentFactoryResolver['ngModule'].instance.constructor.decorators.values（））[0]['args'][0]；
const factories=object.declarations.concat（object.entryComponents、object.imports、object.providers）；
//const factories=Array.from（this.componentFactoryResolver[''u factories'].keys（））；
const factoryClass=factories.find（（x:any）=>x.name==您的组件名称）；
const factory=this.componentFactoryResolver.resolveComponentFactory（factoryClass）；
//
const ref=this.dialogService.open（factory.componentType{
标题：您的组件名称，
});

我用这种方法解决了我的问题

const factories = Array.from(this.resolver['ngModule'].instance.constructor.ɵmod.declarations);
const factoryClass = <Type<any>>factories.find((x: any) => x.name === 'your_component_name');

const factories=Array.from（this.resolver['ngModule'].instance.constructor.ɵmod.declarations）；
const factoryClass=factories.find（（x:any）=>x.name==='your_component_name'）；

Netnel Basal就这个话题写了一篇很棒的博文：特别是关于ngComponentOutlet的部分，我已经读过了，它会对你的问题感兴趣。我正在尝试导入组件，但我在OP中遇到了相关的错误。我尝试了很多方法，但任何方法都对我有效。我认为“src/app/components/dashboard/catalog/products/products.component”应该可以用，不是吗/您确定尝试动态创建的组件已添加到NgModule的entryComponents数组中吗？（app.module.ts或直接父模块文件）是，Shravan。我尝试过将其添加到entryComponents数组，也尝试过不将其添加到entryComponents数组，因为我已经读过Ivy，不再需要将组件添加到entryComponents数组。请看这里

const factories = Array.from(this.resolver['ngModule'].instance.constructor.ɵmod.declarations);
const factoryClass = <Type<any>>factories.find((x: any) => x.name === 'your_component_name');