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

Question

我有两个 ng-module

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

我已经通过延迟加载加载了 Repeat order。

现在我想在仪表板内使用 Repeat order 作为 html

<app-repeatorderlist></app-repeatorderlist>

如果我这样做会抛出一个错误

'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

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

Answer 1

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

• https://github.com/Tenmak/component-communication/tree/shared-component

---

1. AppModule 导入 MainModule(类似于您的 DashboardModule)。
2. ReapeatOrder 模块是延迟加载的，可以从 MainModule
导航到
3. 两个模块都导入一个具有共享组件的共享模块。
4. MainModule 和 ReapeatOrder 在其模板中使用共享组件。