Angular: Export Components from Lazy Loaded Module

Question

AppModule:
- has ShellModule as lazy load
ShellModule:
- import SharableModule
  - use SharableComponent
- has FooModule as lazy load

SharableModule:

export SharableComponent

provide SharableService

FooModule:
- routing FooComponent OR BarComponent
FooComponent, BarComponent
- use ShareableComponent

Does not work SharableModule.exports with lazy load, So can not use SharableComponent in FooModule

is that right?

I added Components List of SharableModule to FooModule then work right.

but occured error, because declared on 2 modules(ShellModule, FooModule).

but ShellModule Components required SharableModule Features like FooModule

have anything right way?

sugarme · Accepted Answer · 2018-05-21 03:44:51Z

3

It is addressed quite comprehensively at the docs.

Generally, you should have shared.module where you can import/export all your shareable component/directive, other modules. And it will be import in any lazy-loading modules you want to use it.

For services, generally they should be singleton (single instance) for your whole application to use. Therefore, they should be grouped in so-called core.module and this module will be imported in your root.module (aka. app.module`).

Any feature modules should be lazy-loading modules.

The project structure is something like this:

+--app
    |
    +--core.module/
    |   |
    |   +--(import your sevices here...)
    |
    +--shared.module
    |   |
    |   +--(import/export all your components/directives/modules here)
    |
    +--any-lazy-loading.module
    |   |
    |   +--(import shared-module here)
    |
    app.module
        |
        +--(import core.module here)

answered May 21, 2018 at 3:44

sugarme

7615 silver badges9 bronze badges

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

4 Comments

styliss Over a year ago

thanks, i wanted the better way of this case like provideIn, but seems to impossible. did you made tree yourself or used any tool?

sugarme Over a year ago

That simple tree can be created with any editor. Can you specify provideIn?

styliss Over a year ago

if has some ascii tree auto-generator, i wanted know it. sorry, it was providedIn. i just wanted component declaration like not-lazy loading that has not additional code , or wish to work it. at least as like providedIn

sugarme Over a year ago

Its a little bit off topic, but if you are using linux, then just sudo apt-get install tree then you can print to console the current folder tree as tree.

Mustansir Ali · Accepted Answer · 2018-05-21 02:28:34Z

Do not use SharableModule to provide SharableService as each lazy loaded module that imports the service will end up with different instance of the service. If you need to use all those services as singleton then add them to core module. You can also create a separate core-service.module. Use Sharable Module to just share components or directives.

You can do this

core-components.module.ts[ Add core components]
core-services.module.ts[ Add all shared services]
shared.module.ts [ this module exports all shared component and modules]

In the shell.module.ts import the SharedModule i.e. shared.module In the foo.module import the SharedModule i.e shared.module Similarly you can add as many modules[ lazy loaded or non lazy loaded] with just SharedModule imported as the common module.

This will prevent any cyclic dependencies and let you share the common components across the app modules.

Collectives™ on Stack Overflow

Angular: Export Components from Lazy Loaded Module

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related