Circular dependency when trying to import shared components into shell module (SharedModule <-> ShellModule).

I want to use ish-content-include to make it possible for the client to edit the header navigation menu items. However to use ish-content-include I have to import sharedModule into shellModule. ShellModule already is being imported by sharedModule, so when i import sharedModule they will depend on eachother creating a circular dependency and giving the error Maximum call stack exceeded.

How can I solve this issue?

Note: This will be used as reference and discussed tomorrow with the internal intershop team

[dhhyi]

Hi @adrianResler,

For example I would need to use ProductQuantityComponent in MiniBasket that is part of shellModules in order to change lineItem quantity from the MiniBasket overlay level

Yes, if this PR is merged, it should be possible to do this for any component in the shared module by calling the lazy-component schematic. With your example:

ng g lazy-component src/app/shared/components/product/product-quantity/product-quantity.component.ts

For projects this is a good approach and nothing really speaks against it. By adding lazy component wrappers to the shell the initial bundle doesn’t grow as significantly as moving components to the shell module would do. But if this is overused, the code can become quite unreadable.

For the PWA itself I’d rather propose a refactoring and lazy-fy the line item list for the mini-basket in #528 like you just inspired me to do:

https://github.com/intershop/intershop-pwa/blob/e2f1574d5a1a951106b8673d1461b1937ab38174/src/app/shell/header/mini-basket/mini-basket.component.html#L18-L20

That way also the ish-product-image component can be moved to the shared module so the initial bundle gets smaller.

[ismail-codinglab]

I have taken a good look at it and tried to de-couple shellModule from sharedModule. However as i kept decoupling i found out there’s a decision being made a while ago which makes this quite a big investment to decouple.

The shellModule in my opinion should not be treated as a sharedModule, it should not be a “foundation” for another module. It should be a dead-end for header/footer/whatever. While I do have an opinion on a business perspective this isn’t feasible because of the time investment.

so we are going with the provided route of something like https://github.com/intershop/intershop-pwa/pull/496.

Thank you for your time and for the quick replies!