如何修复 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

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.

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

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

enter image description here