Circular dependencies on angular modules using typescript

Question

I'm facing this issue where i have 2 angular 1.5 modules that depend on each other, which is fine by angularjs, but when i import them using typescript & webpack, i get circular typescript-module dependencies and the modules are not loaded properly. I dont have circular dependencies in the angular services between the modules, therefor there should be no problem depending the angular-modules 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 example above, i get "cannot get 'name' of undefined" on the last line, since FirstModule is not exported yet.

One solution i saw online is just to not define the SecondModule as a dependency of FirstModule, but make them both dependencies of a parent module (my main app module), the problem is that i cant mock FirstModule using ngMock for unit testing - since it does not register SecondModule as a dependent sub-module. so i have to mock my whole main app which is big and messy.

Other solution i saw was to wrap the angular-modules with typescript classes, and put the angular module creation in the constructor of this class, so i can control when the module is created, but then i have to refactor my whole application to create objects of those wrapped modules, and i have no idea how will this affect writing unit tests using ngMock.

Are there any best practices for this situation?

Thanks!

Answer 1

You can export a string constant as the first thing in the file

//first.module.ts
export const prefixFirstModule = "prefixFirstModule";
import {prefixSecondModule} from "second.module";
export const FirstModule = angular.module(prefixFirstModule,[prefixSecondModule]);

//second.module.ts
export const prefixSecondModule = "prefixSecondModule";
import {prefixFirstModule} from "first.module";
export const SecondModule = angular.module(prefixSecondModule,[prefixFirstModule]);

It's a bit of a pain, but as far as I'm aware it's the only way round the problem with the same support for tree shaking etc with your current module structure.