5

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

Rohan Fating
  • 2,045
  • 12
  • 23
Bharat Joshi
  • 179
  • 1
  • 3
  • 14
  • 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 Sep 05 '17 at 13:03
  • @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 Sep 06 '17 at 05:14
  • Example coming soon – Alex Beugnet Sep 06 '17 at 10:39

1 Answers1

5

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.
Alex Beugnet
  • 3,593
  • 4
  • 21
  • 38
  • Thanks a ton Alex , really lot to learn. One last thing why you had taken two ng-module in every both component. main-module.module, main-routing.module.Can't it achievable through on ng inside both modules? – Bharat Joshi Sep 06 '17 at 17:15
  • I just exported the routes for each modules as modules themselves, I find it easier to manage them this way. – Alex Beugnet Sep 06 '17 at 18:03
  • hmm..if I understand this, there is a copy of shared module in both appmodule (via mainmodule), and lazy loaded module (or am i wrong?). SO, how do we handle when most/all of the logic in lazy is needed in main, so having a shared copy in appmodule/mainmodule sort of defeats the lazy loading purpose. – user292701 Dec 21 '17 at 01:39
  • actually, let me sketch my situation; I have a small enough appmodule/coremodule, with 4 routes to 4 modules that I'd like all to be lazy loaded. The problem I'm trying to solve is how to handle when modules 1 thru 3 are standalone, but module 4 wraps/includes modules 1-3. The user can go straight to any one of these 4. (Imagine book edit app with edit preface, edit chapter, edit bio, and edit/view entire book). – user292701 Dec 21 '17 at 02:48