Lazy Load Modules which are not part of routes

Question

How can I load modules/components with lazy load those are being used in another component/module?

Let's say there are below 3 modules, where login and home are being loaded with lazy load.

AppModule (main)
LoginModule
HomeModule

Now, I've created another module lib module which contains few custom components like grid, buttons etc.. these components will be consumed by components of a home or other modules and will never going to be used directly from any routes.

Here, if lib module is imported into a home and other modules it's being duplicated in each chunk file.

Is there any way to lazy load lib module along with routes without duplicating code?

I also tried to import lib into app module but it's not working with a lazy load of the home module and gives an error that If 'grid' is an Angular component, then verify that it is part of this module.

implemented same as given in this comment, but want to avoid duplication in each chunk file https://stackoverflow.com/a/46073868/6171030 — Vijay Chauhan, Apr 24 '18 at 06:50

score 2 · Answer 1 · answered Apr 24 '18 at 06:51

2

Since this module is not part of any routing , ti seems to me kind of shared module . And your shared module should be imported only once in the whole application.

You should import the core module into main module with decorator as @optional and @SkiptoSelf which will ensure to load the module only once in the whole application.

answered Apr 24 '18 at 06:51

Ishant Gaurav

1,183
2
13
32

Thanks for your response ishantg, will try out this. – Vijay Chauhan Apr 24 '18 at 07:01

score 0 · Accepted Answer · answered May 01 '18 at 08:53

0

Below article helped to resolve a problem.

https://angular-2-training-book.rangle.io/handout/modules/shared-di-tree.html

answered May 01 '18 at 08:53

Vijay Chauhan

113
7

Lazy Load Modules which are not part of routes

2 Answers2