Angular 5延迟加载模块中的条目组件不工作

我开发了一个angular 5应用程序。我已经将我的应用程序划分为多个模块，如ReportModule、ProjectModule等。我正在惰性地加载这些功能模块

{ path: 'bulkrmchange', loadChildren: './modules/empwise/empwise.module#EmpwiseModule' }

我的问题是，当我试图将延迟加载模块中的组件作为入口组件加载时，它给出了以下错误

现在我已经研究了很多，发现我们可以使用NgModuleFactoryLoader来解决这个问题。我已经尝试了下面的代码

ngAfterViewInit() {
        const path = './modules/empwise/empwise.module#EmpwiseModule'; 
        this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
            const entryComponent = (<any>moduleFactory.moduleType).entry;
            const moduleRef = moduleFactory.create(this.injector);

            const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
            this.cf.createComponent(compFactory);
        });
    }    

---

是的，对于您的案例，条目组件在惰性模块中不起作用。当您在components factory中看到存储列表时，不会出现条目components define inner Lazy Module。但我有一个解决方案，使用自定义元素（角度元素）渲染组件

从Angular的版本6开始，Angular元素就可以使用了，它使事情变得更加简单。 安装组件@angular/元件：

ng add @angular/elements

在lazy模块的entryComponents中添加渲染所需的组件（不要担心，在这种情况下该组件可以正常工作）

现在，在app.component.ts的构造函数中，放置：

import {Component, OnInit, OnDestroy, Injector} from '@angular/core';
import {createCustomElement} from "@angular/elements";

constructor(private injector: Injector) {
  // CUSTOM ELEMENTS
  // Convert `InfoWindowComponent` to a custom element.
  const customEle= createCustomElement(NameOfComponentToRender, {injector});


// Register the custom element with the browser.
customElements.define('name-example-element', customEle);
}

在此步骤中，自定义元素将在浏览器中注册，我们只需要调用渲染它：

 const element = document.createElement('name-example-element') as NgElement & WithProperties<{}>;
 document.body.appendChild(element );

---

关于，我希望这能对您有所帮助。

是的，对于您的案例，条目组件在惰性模块中不起作用。当您在components factory中看到存储列表时，不会出现条目components define inner Lazy Module。但我有一个解决方案，使用自定义元素（角度元素）渲染组件

从Angular的版本6开始，Angular元素就可以使用了，它使事情变得更加简单。 安装组件@angular/元件：

ng add @angular/elements

在lazy模块的entryComponents中添加渲染所需的组件（不要担心，在这种情况下该组件可以正常工作）

现在，在app.component.ts的构造函数中，放置：

import {Component, OnInit, OnDestroy, Injector} from '@angular/core';
import {createCustomElement} from "@angular/elements";

constructor(private injector: Injector) {
  // CUSTOM ELEMENTS
  // Convert `InfoWindowComponent` to a custom element.
  const customEle= createCustomElement(NameOfComponentToRender, {injector});


// Register the custom element with the browser.
customElements.define('name-example-element', customEle);
}

在此步骤中，自定义元素将在浏览器中注册，我们只需要调用渲染它：

 const element = document.createElement('name-example-element') as NgElement & WithProperties<{}>;
 document.body.appendChild(element );

---

关于，我希望这对您有所帮助。

条目组件是动态加载的组件。它与激光加载模块不同，不会输出错误。如果是这样的话，就意味着你在代码中犯了错误。请发布它，如果可以的话，请发布一个复制问题的页面。你可以将你的应用程序模块、路由模块、EmpwiseModule和EmpwiseRoutingModule（复制问题的最小代码）@trichetriche我尝试的是打开一个模式弹出窗口，其中包含延迟加载模块中的角度组件。所以我在entry组件中添加了这个组件，就像我们通常在这些类型的场景中所做的那样，但它仍然会给我一个错误。如果使用多模块组件，则它应该是第三个模块，或者在调用者模块中。条目组件是动态加载的组件。它与激光加载模块不同，不会输出错误。如果是这样的话，就意味着你在代码中犯了错误。请发布它，如果可以的话，请发布一个复制问题的页面。你可以将你的应用程序模块、路由模块、EmpwiseModule和EmpwiseRoutingModule（复制问题的最小代码）@trichetriche我尝试的是打开一个模式弹出窗口，其中包含延迟加载模块中的角度组件。所以我在entry组件中添加了这个组件，就像我们通常在这些类型的场景中所做的那样，但它仍然会给我一个错误。如果使用多模块组件，则它应该是第三个模块，或者在调用者模块中。