Angular: Tips and good practices

This page is just a summary of good practices on how to develop angular projects and modules

Component types

• Dumb components: Components to display some information. We only can communicate with them with @input or @output
• Smart components: These components do not render any information by themselves, just with dumb components. They provide information, communicate with API, ...

Modules

• Widget: Modules like common-visual-components. Should not have providers neither smart components. Should not use services (like API)
• Shared: More elaborated and hight level components. Should have only dumb components
• Service: Module composed only by services
• Routed: Modules that can be routed directly (and usually loaded like lazy modules)
• Domain: Without modules for fully features. For example, if a routed module is huge, could be splitted into domain modules
• Routing: Just application routes and guards

ACTIONS

• Delete all references to material from every project/module. common-visual-components is the only project that imports material. Other projects must import material components from common-visual-components
• Review dependencies between modules. For example:
  • common-visual-components imports HttpClientModule, but should not use services
  • shared-components should not import material, just throught common-visual-components
  • shared-components imports api. why?
  • api has some PIPE, but should be in shared-components or common-visual-components

TIPS

• Import material only in common-visual-components. If other module/project needs material, import from common-visual-components
• Diesign views as smarty/dump sequence. For complex views, a dump component could contain other smart component
• Ensure to cleanup unused imports.