如何在 Angular 9 中通过变量加载动态模块？答案

【问题标题】：How do you load a dynamic module by variable in Angular 9?如何在 Angular 9 中通过变量加载动态模块？
【发布时间】：2020-09-29 22:37:26
【问题描述】：

我有以下代码来动态加载模块：

export class DynamicQuestionComponent {
    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private viewContainerRef: ViewContainerRef
    ) {}

    @Input() form: FormBase;
    @Input() formgroup: FormGroup;
    @ViewChild('content', { read: ViewContainerRef, static: true }) content: ViewContainerRef;

    @Input() set question(qvalue){
        if (qvalue){
            this.content.clear();
            var compath = `./${qvalue.qType}-question.component`;
            var testpath = './proto-question.component';
            import('./proto-question.component').then( dyncomp => {
                const component = this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(dyncomp.ProtoQuestionComponent));
                (<any>component).instance.form = this.form;
                (<any>component).instance.question = qvalue;
                (<any>component).instance.formgroup = this.formgroup;
                this.content.insert(component.hostView);
                component.injector.get(ChangeDetectorRef).markForCheck();
            })
        }
    }
}

目前，如果我在导入函数中对组件路径进行硬编码，这是唯一可行的方法。我希望能够将变量传递给导入函数，但每次切换到变量时，都会出现可怕的找不到模块错误：

ERROR Error: Uncaught (in promise): Error: Cannot find module './proto-question.component'

如您所见，我什至测试了一个与硬编码版本完全相同的变量，但它也失败了。

我觉得必须有一个设置才能使其正常工作。

我正在使用：

Angular 9.1.9

Angular CLI 9.1.4

假设我可以解决动态变量问题，那么我需要弄清楚如何将动态组件传递给 resolveComponentFactory 调用。

【问题讨论】：

标签： angular webpack ivy

【解决方案1】：

很遗憾，无法通过变量加载动态模块。我有类似的问题，我找不到解决方案。 Dynamically import modules with dynamic routes

【讨论】：

我想我也得出了这个结论，唉。