Angular Circular Module Dependencies

Question

I have the following circular module dependency problem:

Involved angular modules:

1. DatabaseMenuModule - Search and View a Database Table
2. DetailViewModule (child of Database Menu Module) - View one Dataset in the table
3. SubtableModule - If a foreign key gets clicked open another DatabaseMenu instance in a modal dialog

The overall structure is kind of a self including recursion since every dataset can have foreign keys and therefore open (on click) another Database Menu instance. As shown in the image I have a circular import of the modules and therefore it doesnt work.

zone.js:917 Uncaught Error: Unexpected value 'undefined' imported by the module 'SubtableModule'

But I also do not see any possibility to resolve this circle.

Does anyone have an idear how to relove this issue?

Answer 1

You have to get rid of circular reference.

Your SharedModule imports OneModule which imports SharedModule which imports OneModule and so on.

To avoid this, you should try to make SharedModule have a SharedService that you can include in all your components, try to regroup the 'logical thinking' of your code in services.

If you want to use a component across multiple modules, you'll need to create a "shared" module and add that component the shared module's exports. Then you add that shared module into your other modules imports.