I am currently experiencing an issue with 2 Angular 1.5 modules that have dependencies on each other. Although this setup is acceptable in AngularJS, I encounter circular TypeScript module dependencies and the modules fail to load properly when imported through webpack. There are no circular dependencies in the Angular services between the modules, so theoretically there should be no issues in depending on each other.
//first.module.ts
import {SecondModule} from "second.module.ts";
let FirstModule = angular.module("firstModule",[SecondModule.name]);
export {FirstModule};
//second.module.ts
import {FirstModule} from "first.module.ts";
let SecondModule = angular.module("secondModule",[FirstModule.name]);
export {SecondModule};
In the code snippet above, I encounter an error "cannot get 'name' of undefined" on the last line because `FirstModule` has not been exported yet.
One solution I came across online suggests not defining `SecondModule` as a dependency of `FirstModule`, but rather making them both dependencies of a parent module (the main app module). However, this approach poses challenges for unit testing using ngMock, as `SecondModule` is not registered as a dependent sub-module in this scenario. It means I would need to mock the entire main app, which could be cumbersome and messy.
Another proposed solution involves wrapping the Angular modules with TypeScript classes and initializing the module creation inside the class constructor. While this method offers more control over module creation, it requires significant refactoring of the application to use objects of these wrapped modules. Additionally, the impact on unit testing with ngMock remains uncertain.
Are there any recommended best practices for handling this situation effectively?
Thank you!