How to import/use lazy load module on another ng-module

Question

I have two ng-module

1. Dash Board
2. Repeat order list

I had loaded Repeat order through the lazy load.

Now I want to use Repeat order, inside dashboard as html

<app-repeatorderlist></app-repeatorderlist>

If I am doing same it is throwing me an error

'app-repeatorderlist' is not a known element: 1. If 'app-repeatorderlist' is an Angular component, then verify that it is part of this module. 2. If 'app-repeatorderlist' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to

And if I am adding it's reference on app.module then it's throwing error

Type RepeatorderlistComponent is part of the declarations of 2 modules: AppModule and repeatorderModule! Please consider moving RepeatorderlistComponent to a higher module that imports AppModule and repeatorderModule. You can also create a new NgModule that exports and includes RepeatorderlistComponent then import that NgModule in AppModule and repeatorderModule. Error: Type RepeatorderlistComponent is part of the declarations of 2 modules: AppModule and repeatorderModule! Please consider moving RepeatorderlistComponent to a higher module that imports AppModule and repeatorderModule. You can also create a new NgModule that exports and includes RepeatorderlistComponent then import that NgModule in AppModule and repeatorderModul

I can understand I have to create a new module(higher) but how can any body guide on same

Answer 1

Here is a working example I just made to show you how it is setup.

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

---

1. AppModule imports the MainModule (similar to your DashboardModule) .
2. ReapeatOrder module is lazy-loaded and can be navigated to from the MainModule
3. Both Modules import a shared module, with shared components.
4. Both MainModule and ReapeatOrder use the shared components in their templates.