Importing a Component from a lazy-loaded Module into another lazy-loaded Module

Question

I have followed the Tour-of-Hero tutorial on Angular2 official page. But I took it a step further by introducing Modules lazy-loading.

I've got the following Feature Modules:

Module Dashboard
- dashboard component
Module Hero
- hero-list component
- hero-detail component
- hero-search component
- hero-search service
- hero model

The hero-search component is a directive that should be used in the Dashboard Module.

However, according to this documentation about Angular2 architechture, Routed module should not be imported by others. Meaning, I should not import the Hero module into the Dashboard module. If I do, my routes are no longer working anyway.

Also the hero-search component uses a hero-service and the hero-model, so it has strong dependencies on Hero Module, making it hard to externalize.

So how am I supposed to use the hero-search component in the Dashboard component ?

Sam, have you already found a solution to this problem? I'm struggling with the same issue. — Nico
– Nico, Commented Sep 27, 2016 at 12:47
No, I have no idea what is the correct approach on this. I'm looking forward to John Papa's tutorial on ngModule. — Sam
– Sam, Commented Sep 27, 2016 at 14:23

Stefan Svrkota · Accepted Answer · 2016-09-22 20:26:32Z

2

You can make a third module, let's call it UtilityModule, export HeroSearch from there and then import UtilityModule to DashboardModule and HeroModule. That way, you will be able to use HeroSearch component in both modules.

@NgModule({
  imports: [ ... ],
  declarations: [ ... ],
  exports: [ HeroSearch ]
})

export class UtilityModule { }

edited Sep 22, 2016 at 20:26

answered Sep 22, 2016 at 20:16

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam Over a year ago

Stefan, I've thought of doing that, but the HeroSearchComponent has strong dependencies on a HeroSearchService and on the Hero model. I've update my post accordingly. This makes it hard to put in a SharedModule (or UtiltyModule)

Stefan Svrkota Over a year ago

@Sam Why don't you also move all needed dependencies for HeroSearch to UtilityModule as well?

Sam Over a year ago

Well, simply because the Hero Model or the Hero Service should really be in the Hero Module, not in a Shared Module. I'm surprised this issue was not addressed by the Angular Team in the tutorial as it is a fundamental question in my opinion. I can see many use-cases where I would need to import only one specific component of a lazy-loaded module into another module.

ggabor · Accepted Answer · 2016-09-25 05:50:43Z

0

As I know you can't do that. Lazy routed modules acts like an independent pieces of your app. So anything declared there should be used only inside that module's scope. Think about it. When you load your Dashboard you can never be sure about your lazy Hero module was loaded yet at all. So how you would like to use anything from a module which maybe wasn't loaded yet?

Maybe I'am wrong but I also try to design a more complex module structure than they shown us in the docs without success. I really think that this module system is an example of a bad rush design. Good luck with it.

answered Sep 25, 2016 at 5:50

ggabor

1,7224 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Importing a Component from a lazy-loaded Module into another lazy-loaded Module

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related