How to fix maximum call stack size exceeded error in angular 11?

Question

I have 2 modules in angular 11

1. CustomerModule
2. AccountingModule

and declare some component as widget component in these modules that used in each other

1. CustomerModule -> CustomerBlockInfoWidget
2. AccountingModule -> AccountingBalanceWidget

now want to use CustomerBlockInfoWidget in AccountingModule and AccountingBalanceWidget in CustomerModule

and finally, I have the infinity load and get Maximum call stack size exceeded error

now how I can use these widgets that fix the infinity load

Answer 1

In may case, I accidentally included my component to import instead of export. the commented part was causing the problem.

enter image description here

Answer 2

Please make sure that you did not add any components, directives, and pipes in the import array of modules.

NOTE

You can add standalone components, directives, and pipes in the import array of the module.

Answer 3

Maximum call stack size exceeded error is always a symptom of an infinite loop. The provided information doesn't point to a possible place in the code that triggers it.

It might be a simple loop with no chance for an exit or a more complex scenario like Function A calls Function B which calls Function C which calls Function A and here it goes again.

If you have a call stack of the error, reading it should be enough to notice this infinite execution.