如何在另一个 ng-module 上导入/使用延迟加载模块

use*_*602 5 lazy-loading angular2-modules angular

我有两个 ng-module

  1. 仪表盘
  2. 重复订单列表

我通过延迟加载加载了重复订单。

现在我想在仪表板内使用重复订单作为 html

<app-repeatorderlist></app-repeatorderlist>
Run Code Online (Sandbox Code Playgroud)

如果我做同样的事情,它会给我一个错误

'app-repeatorderlist' 不是一个已知元素: 1. 如果 'app-repeatorderlist' 是一个 Angular 组件,那么验证它是否是这个模块的一部分。2. 如果 'app-repeatorderlist' 是一个 Web 组件,则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以

如果我在 app.module 上添加它的引用,那么它会抛出错误

类型 RepeatorderlistComponent 是 2 个模块声明的一部分:AppModule 和 repeatorderModule!请考虑将 RepeatorderlistComponent 移至更高的模块,该模块导入 AppModule 和 repeatorderModule。您还可以创建一个新的 NgModule,它导出并包含 RepeatorderlistComponent,然后在 AppModule 和 repeatorderModule 中导入该 NgModule。错误:类型 RepeatorderlistComponent 是 2 个模块声明的一部分:AppModule 和 repeatorderModule!请考虑将 RepeatorderlistComponent 移至更高的模块,该模块导入 AppModule 和 repeatorderModule。您还可以创建一个新的 NgModule 导出并包含 RepeatorderlistComponent,然后在 AppModule 和 repeatorderModul 中导入该 NgModule

我可以理解我必须创建一个新模块(更高)但是任何身体指南如何

Ale*_*net 5

这是我刚刚制作的一个工作示例,用于向您展示它是如何设置的。


  1. AppModule导入MainModule(类似于您的DashboardModule).
  2. ReapeatOrder 模块是延迟加载的,可以从 MainModule
  3. 两个模块都导入一个共享模块,具有共享组件。
  4. 双方MainModuleReapeatOrder使用共享的组件在他们的模板。