Encountering a stackOverflow error in my Angular app. (see updates at the end)
The main issue lies within my component structure, which consists of two components: the equipment component with equipment information and the socket component displaying connection types for each equipment. The socket component contains a dropdown menu to select available devices for connection.
The "container" component creates a socket component labeled "start element" to establish an initial connection point. From there, users can continue adding elements to the diagram.
Upon selecting the first "start element" (pic1), the corresponding equipment loads with 7 sockets. Subsequently selecting one device from a socket (pic2) works without any issues. However, the app crashes when adding another device to the corresponding socket (pic3).
https://i.stack.imgur.com/TGd0A.png
The error message received is:
ERROR RangeError: Maximum call stack size exceeded
at refreshView (core.js:9461)
... Further investigation revealed that upon the third element selection, both the Socket onInit and Equipment onInit functions are continuously called, indicating an infinite loop situation.
I have ensured that the socket component is only called twice in the application: once in the container component and then through ngfor in the EquipmentComponent. Similarly, the equipment component is instantiated once the parentSocket.element is selected and displayed.
Examining the socketcomponent code:
import { Component, Input, OnInit } from '@angular/core';
... And here's its corresponding HTML file:
...Finally, let's take a look at the equipment component:
import { Component, Input, OnInit } from '@angular/core';
... Followed by its respective HTML content:
...Your insight into this matter would be greatly appreciated! Thank you!
Update 1: Recently modified the loadEquipment method in the socket component to prevent continuous change detection:
equipmentSelected: Equipment;
loadEquipment(eq: Equipment){
this.equipmentSelected = eq;
}This adjustment now allows me to add more child elements to the tree structure. However, the challenge now is retaining the this.mySocket.element = eq functionality to preserve the tree structure for serialization purposes...