Angular 模块 - 通过延迟加载重用来自域模块的共享组件的最佳实践

Question

I know the concepts of lazy loading and sharing modules, but I'm not sure what will be the best practice of deviding code into modules in my app. I have 4 pages:

1. Dashboard
2. Drinks
3. Drinks recipes
4. Bars

So I divided my app into 4 logical, domain modules: DashboardModule , DrinksModule , RecipesModule , BarsModule . While coding I've noticed that I have some dependencies between modules:

1. DashboardModule reuses some components from all other modules.
2. BarsModule and RecipesModule reuse some components from DrinksModule

So problems I see are:

1. With DashboardModule all other modules must be loaded, but only some components are used.
2. DrinksModule is always loaded, but only some components are used in other modules.

I don't want to move all of that reused components to a single SharedModule because these components fit the specific domain (like bar or drinks) and also some components will be loaded unnecessarily.

Is it sense to split these domain modules like DrinksModule and SharedDrinksModule and what will be the best project structure for that? Or maybe there is a better practice to handle these problems?

Answer 1

Best option is to create a sharedModule and move the resuble components to that module. Also make sure to mske those component as dump component.