Scrolling Table Angular Error

GoJS
1

Hi there,

I’m currently trying to use the scrolling table panel but I receive this error when I build my angular project.

image.png959×119 6.24 KB

important sections of code from my class that is imported into the diagram.ts file.

import * as st from 'gojs/extensionsTS/ScrollingTable';
import * as go from 'gojs';

private static $ = go.GraphObject.make;  

static getDiagramTemplate(){
    var template = this.$(go.Node, "Vertical",
    {
      selectionObjectName: "SCROLLER",
      resizable: true, resizeObjectName: "SCROLLER",
      portSpreading: go.Node.SpreadingNone
    },
    new go.Binding("location").makeTwoWay(),
    this.$(go.TextBlock,
      { font: "bold 14px sans-serif" },
      new go.Binding("text", "key")),
    this.$(go.Panel, "Auto",
      this.$(go.Shape, { fill: "white" }),
      this.$("ScrollingTable",
        {
          name: "SCROLLER",
          desiredSize: new go.Size(NaN, 60),  // fixed width
          stretch: go.GraphObject.Fill,       // but stretches vertically
          defaultColumnSeparatorStroke: "gray",
          defaultColumnSeparatorStrokeWidth: 0.5
        },
        new go.Binding("TABLE.itemArray", "items"),
        new go.Binding("TABLE.column", "left", function(left) { return left ? 2 : 0; }),
        {
          "TABLE.itemTemplate":
            this.$(go.Panel, "TableRow",
              {
                defaultStretch: go.GraphObject.Horizontal,
                fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides,
                fromLinkable: true, toLinkable: true
              },
              new go.Binding("portId", "name"),
            ),
          "TABLE.defaultColumnSeparatorStroke": "gray",
          "TABLE.defaultColumnSeparatorStrokeWidth": 0.5,
          "TABLE.defaultRowSeparatorStroke": "gray",
          "TABLE.defaultRowSeparatorStrokeWidth": 0.5,
          "TABLE.defaultSeparatorPadding": new go.Margin(1, 3, 0, 3)
        }
      )
    )
  );
    return template;
  }
2

It seems like the file is not importing ScrollingTable. This is probably because the extensionsTS scrolling table (and everything else in that folder) were built to use UMD modules and you are using ES6 modules, so it cannot find the module in the JavaScript output.

You will need to change the tsconfig.json in the extensionsTS folder to use something like:

          compilerOptions: {
            "module": "ES6",
            "target": "ES6",
            "noImplicitAny": true
          }

Then be sure to recompile everything in extensionsTS, then try again.

That is how we got our GoJS + vue + webpack project to work. The webpack config substitutes an ES6-compatible compiler options to the ts loader.

3

so I tried that, I changed the tsconfig.json file in the go node_module then I ran npm rebuild still have the same error message :/

I took a look at your vue project but I can’t see why it’s not working for me.