Summary:
Is it possible to limit Angular JS dependency injection to components that are only within a module?
I recently took over an Angular JS codebase that is quite disorganized, resembling what some would call "spaghetti code." Furthermore, most of the app's functionality is shared across multiple modules even though the app itself is quite large.
The lack of namespace restrictions on a module level in Angular has led our team to disregard module boundaries. While this is allowed by Angular, it has resulted in a system with basic structure and components that are not easily reusable or extendable, let alone substitutable for other modules.
Now, our client requires us to expand the app to allow for certain modules to be substituted easily, prompting me to come up with a solution.
I am considering implementing module-to-module interfaces inspired by the facade pattern and interface pattern concepts. Essentially, I aim to create services that shield the internal workings of a module from external entities, ensuring data flow without revealing details. Additionally, I plan to use the interface pattern to define expectations for data passed to modules.
This restructuring aims to simplify the transition process while enforcing rules uniformly across the development team. Unfortunately, Angular lacks mechanisms to enforce dependency injection rules, and existing tools like the angular plugin for eslint do not address this issue. Has anyone encountered a similar scenario? My online search yielded no results.