Challenge
For many Angular developers, this error is a common hurdle to overcome in the early stages. The issue often stems from a lack of understanding of how Modules function when it comes to declaring Components and Directives.
In this scenario, you have a Directive that needs to be used in multiple Modules, leading to declarations in each Module. However, Angular signals an error due to duplicate component declarations across different Modules.
The typical reaction is to move the Directive to a higher-level Module assuming it will be accessible to all child Modules. Unfortunately, this approach does not always yield the desired outcome.
Solution
The root cause lies in misconceptions about Module imports. Simply having Directives or Components at a higher level does not guarantee availability to all child elements (it depends on execution sequence).
A more effective strategy involves considering whether your current Module adequately imports all necessary Modules containing Directives and Components. This led to the creation of a ShareModule, housing commonly-used Components and Directives for easy importing wherever needed.
In essence, establish a SharedModule to house shared Directives and Components, importing it into relevant Modules as required.
For further insights, consult this informative official article on shared modules - https://angular.io/guide/sharing-ngmodules