When developing my angular application, I implement the application component segmentation logic by organizing my folders in the following structure:
app.module.js
app.config.js
components
---- core
-------- core.module.js
-------- etc...
---- component1
-------- component1.module.js
-------- etc...
---- component2
-------- component2.module.js
-------- etc...
---- etc...
shared
---- sharedComponent1
-------- etc...
---- etc...
assets
In my app.module.js file, I group all my components together. Each individual module file, like component1.module.js, lists the dependencies for that specific module. While I could technically list all dependencies in the app.module.js file, I believe keeping it organized by module is cleaner and promotes better modularity.
However, I do encounter some challenges when dealing with modules that are utilized across multiple other modules, such as localization modules. It's not just about the universal usage of the module, but also the need for specific configurations. To address this, I am considering placing the dependency and configuration for such universal modules in the core.module.js and core.config.js files, respectively.
Despite my efforts to follow angular best practices, I couldn't find much guidance on organizing module dependencies, perhaps because angular tends to treat all modules as part of a larger whole.
Alternatively, I am exploring the idea of creating a shared component specifically designed to incorporate these common dependencies into angular, allowing other components to simply depend on this shared component. However, I am unsure if this approach might be overly complex.