Invalid div id; div already has a Diagram associated with it

GoJS
1

I’m getting this error when I’m trying to build by diagram based on an async request.

Error:

EXCEPTION: Invalid div id; div already has a Diagram associated with it.

On my ngOnInit I’m making a http request and on the response I’m running this function (demo):

myFunc(project) {

    // create a make type from go namespace and assign it to MAKE
    const MAKE = go.GraphObject.make;

    // get the div in the HTML file
    const diagramDiv = this.relationsDiv.nativeElement;

    // instatiate MAKE with Diagram type and the diagramDiv
    const myDiagram =
      MAKE(go.Diagram, diagramDiv,
        {
            initialContentAlignment: go.Spot.Center, // center Diagram contents
            'undoManager.isEnabled': true, // enable Ctrl-Z to undo and Ctrl-Y to redo
            layout: MAKE(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
        });

    // the template we defined earlier
    myDiagram.nodeTemplate =
      MAKE(go.Node, 'Horizontal',
        {
          background: '#fab700',
          locationSpot: go.Spot.Center
        },
        MAKE(go.Picture,
            { margin: 5, width: 30, height: 30, background: '<i class="fa fa-th"></i>' },
            new go.Binding('source')),
        MAKE(go.TextBlock, 'Default Text',
            { margin: 5, stroke: 'white', font: '16px sans-serif' },
            new go.Binding('text', 'name'))
      );

    // define a Link template that routes orthogonally, with no arrowhead
    myDiagram.linkTemplate =
      MAKE(go.Link,
          { routing: go.Link.Orthogonal, corner: 5 },
          MAKE(go.Shape, { strokeWidth: 2, stroke: '#343434' })); // the link shape

    let model = MAKE(go.TreeModel);
    model.nodeDataArray =
      [
          { key: '1',              name: 'Don Meow' },
          { key: '2', parent: '1', name: 'Roquefort' },
          { key: '3', parent: '1', name: 'Toulouse' },
          { key: '4', parent: '3', name: 'Peppo' },
          { key: '5', parent: '3', name: 'Alonzo' },
          { key: '6', parent: '2', name: 'Berlioz' }
      ];
    myDiagram.model = model;

  }

Now, this function WORKS especially if I come from another Route without any errors. If I refresh though the page the rendering still happens BUT I’m getting the error I wrote above in my console.

Any ideas on this?

2

What is happening when “refreshing”? If the old DIV and Diagram and Model are there with the correct data, why do anything? For example if only the model needs to be updated, just create that and set Diagram.model.

3

On the “refresh” I’m getting the error above. Meaning that if user is in that page and refresh for some reason the browser then he’ll get the error.

@walter I don’t mean if I refresh the data but if I reload the browser.

4

Would you have this problem if the initialization of the Diagram were done earlier, only once, and the only thing you did in handling the response was to create a new model and replace the Diagram.model?

5

Ok fixed thank you.