CODEWITHSUNDEEP
angular
Sam
Sam

Reputation: 14586

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

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:

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 ?

Upvotes: 5

Views: 1922

Answers (2)

ggabor
ggabor

Reputation: 1712

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.

Upvotes: 0

Stefan Svrkota
Stefan Svrkota

Reputation: 50633

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 { }

Upvotes: 2

Related Questions