my question is related with Angular 2 Modules (@NgModule).
Previously I’ve worked with angular 1.5.8 on huge business application and I’ve got used to Angular 1.x practices.
Important background:
Right now I'm developing something more then single application. It's going to be more like business platform. We set up common platform conventions for styling, naming, structure, REST, etc. Whole platform consist of one main application and some smaller apps closely related with it.
Now I'm going to create baseline version of application and I would like it to be easy to customise (maybe better words are 'to decorate') for clients. I would also like to have each component as reusable as possible. Smaller application can partially utilise the same UI components (and I'm not talking only about components from shared module).
My question is:
- Is it good idea to provide separate module for each significant component? - by 'significant component' I understand components which are pointed by Routes and shared (generic and stateless) components.
Angular docs examples describe feature modules but all contents inside those modules are not encapsulated with modules, they just use components which are added to feature module declarations:[] list.
Pros:
- Ability to expose components dependencies in one place - let's assume that one component uses other component(s). If we have all dependencies listed in imports:[], we don't have to scroll over components template to find all of them
- We have better control over our functional domains (I assume that we can treat module as functional domain) - code is better encapsulated because modules provide us export mechanism so we can easily declare public and private members. It reduces team communication overhead as it is clearly visible which component is public and which is just supporting component.
- We create more reusable code - If we want to use particular component in other application (which also belongs to the platform) it's more comfortable to have it encapsulated in module - at first sight we see what are additional needed dependencies which also should be moved to our application.
- We can keep flatter directory structure - Is that really advantage?
- We can limit size of module declarations - it improves readability.
Cons:
- More coding - we have to declare module for (almost) each component
EDIT: - @NgModule mechanism abuse - i'm not sure but I can imagine that it could increase lazy-loaded module bootstrapping time
Project structure example
--/user-groups //user-groups is lazy loaded module
--/user-groups-list
--user-groups-list.component.ts // Public component
--user-groups-list-filter-input.component.ts // Private component - strong relation with user-groups-list.component
--user-groups-list.module.ts
--user-groups-list.html
--user.groups-list.css
--user-groups.component.ts
--user-groups.module.ts // Router points to this module
--user-groups-routing.module.ts // Routing inside of user-groups
--user-groups.service.ts // It's component service
--user-groups.html
--user.groups.css