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

5
votes

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

1
angularlazy-loadingangular2-modules
I believe you want to use a component from your other module, and not the module itself. The error is obvious since the component you want to use is contained in the other lazy-loaded module and there your first module doesn't know about it. One good solution would be to create a shared component, that would be imported in your lazy-loaded modules. This way, both modules would have visibility over this shared component. – Alex Beugnet
@Alex can you give some idea how? Module 1-: is App Module(root component), contains ngmodule Module 2-: is DashBoard Module 3 -: Repeat Order(Lazy Load), contains ngmodule Now I want to use repeat order inside Dashboard and Individually as well? So what all needed in shared module now? Do it contains one more ngmodule and references or how, please help. – Bharat Joshi
Example coming soon – Alex Beugnet

1 Answers

5
votes

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.