angularangular2-aotangular-ivy

Angular 11 Feature Module cyclic dependency


I know this question has been asked many times however I have not found any solution to the problem short of removing modules and just loading everything in advance.

After starting a very complex Angular app over a year ago, I decided early on to go the Angular preferred way and use feature modules. This is where I broke the app up into Feature modules where each feature would handle the specific area of the application for that feature and utilized lazy loading. Let's say Feature a has searching and all crud functionality built within it for a specific domain within the app. Then there is feature B which was designed the same way. Now I am running into the cyclic dependency between features whereby Feature A needs to use components in Feature B and Feature B needs to use components in Feature A.

This is causing the cyclic dependency while compiling using the ivy compiler. I was able to get it to compile by setting AOT to false however does not seem to be a viable answer. Short of ditching modules I do not see much of an answer out there.

I tried a common module that exports all modules but same problem as Common imports Module A and Module B and then Module A imports Common module. Does anyone have advice on how to solve this problem?

Thanks in advance Paul


Solution

  • If a component is needed in both features A and B it should be placed in a "shared" module. Place all the common components in that shared module and export them. Then import that module in both module A and B.

    Basically, you are on the right track with the common module but the components in that module should not be imported from any other module.