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!

phuhgh · Accepted Answer · 2017-08-27 19:06:25Z

0

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.

edited Aug 27, 2017 at 19:06

answered Aug 27, 2017 at 18:49

phuhgh

3033 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sagi Over a year ago

sounds good, i guess i can also export just the name of the module instead of the angular module itself, and get the same result. but what about best practice for angular modules using typescript? there is no need or advantage for a wrapper class for modules?

phuhgh Over a year ago

I can't think of an advantage of doing it that way, it doesn't mean it doesn't mean there aren't any ;)

phuhgh Over a year ago

for sure though, there is no need for them

Collectives™ on Stack Overflow

Circular dependencies on angular modules using typescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related