不属于路由的延迟加载模块

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.

Answer 1

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.

Answer 2

Below article helped to resolve a problem.

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