angularlazy-loadingangular2-modules

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

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

Solution

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

    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 ReapeatOrderuse the shared components in their templates.