A GraphObject can only be added to a Panel, not to: Shape OR Picture @Angular

I have referred and applied the node template logics with reference to Planogram, shopfloor Monitor, to get the Palatte, group structure, with grid layout form, but the images are not able to seen in the palette or in group diagram. And getting the Error as mentioned in Topic… Attached the code here for your reference.
Images are in the assets and checked for typo as well.
ts code is as below:

import * as go from 'gojs';
import { CoreService } from 'src/app/service/core.service';
import { environment } from 'src/environments/environment';
const $: any = go.GraphObject.make;
@Component({
  selector: 'app-recording-view-diagram',
  templateUrl: './recording-view-diagram.component.html',
  styleUrls: ['./recording-view-diagram.component.css']
})
export class RecordingViewDiagramComponent implements OnInit {
  url_grp_view: any;
  rgwdata: any;

  constructor(private service: CoreService) { }

  ngOnInit(): void { }

  @Input()
  public model!: go.GraphLinksModel;

  public ngAfterViewInit() {  

    var AllowTopLevel = false;
    var CellSize = new go.Size(5000, 5000); 

    function nodeTypeImage(deviceTpyeID) {
      switch (deviceTpyeID) {                                         // Image sizes
        case "12": return "/assets/img/ST-I.png";      // 55x55
        case "13": return "/assets/img/ST-X.png";       // 55x55          
      };
    };

    function save() {
      myDiagram.model = go.Model.fromJson(document.getElementById("savedModel").nodeValue);
    };

    function nodeProblemConverter(msg) {
      if (msg) return "red";
      return 'rgba(0,0,0,0)';
    };

    function nodeStatusConverter(s) {
      if (s >= 2) return "red";
      if (s >= 1) return "yellow";
      return "green";
    }

    // The first Diagram showcases what the Nodes might look like "in action"
    const myDiagram = new go.Diagram("recordingDiagramDiv",
      {
        grid: $(go.Panel, "Grid",
          { gridCellSize: CellSize },
          $(go.Shape), //"LineH", { stroke: "lightgray" }),
          $(go.Shape) //, "LineV", { stroke: "lightgray" })
        ),
        // support grid snapping when dragging and when resizing
        "draggingTool.isGridSnapEnabled": true,
        "draggingTool.gridSnapCellSpot": go.Spot.Center,
        "resizingTool.isGridSnapEnabled": true,
        // For this sample, automatically show the state of the diagram's model on the page
        "ModelChanged": e => {
          if (e.isTransactionFinished) {
            document.getElementById("savedModel").textContent = myDiagram.model.toJson();
          }
        },
        "animationManager.isEnabled": true,
        "undoManager.isEnabled": true
      });
    
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          resizable: true, resizeObjectName: "SHAPE",         
          locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2),        
          mouseDragEnter: (e, node) => {
            e.handled = true;
            node.findObject("SHAPE").fill = "red";
            e.diagram.currentCursor = "not-allowed";
            highlightGroup(node.containingGroup, false);
          },
          mouseDragLeave: (e, node) => node.updateTargetBindings(),          
          mouseDrop: (e, node) => node.diagram.currentTool.doCancel()
        },
        // always save/load the point that is the top-left corner of the node, not the location
        new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),

        $(go.Panel, "Spot",
          $(go.Panel, "Auto",
            { name: "SHAPE" },
            $(go.Shape,
              { fill: null, stroke: null, background: 'rgba(0,0,0,0)' },
              new go.Binding("background", "problem", nodeProblemConverter),
              new go.AnimationTrigger('background')),

            $(go.Picture, 
              { margin: new go.Margin(0, 5, 0, 0), alignment: go.Spot.Center },
              { name: "SHAPE", desiredSize: new go.Size(100, 80) },              
              new go.Binding("source", "deviceTpyeID", nodeTypeImage)),            
          ),  //END Auto Panel
          $(go.Shape, "Circle",//To get to know the STATUS
            {
              alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight,
              width: 12, height: 12, fill: "blue"
            },
            new go.Binding("fill", "status", nodeStatusConverter),
            new go.AnimationTrigger('fill'))
        ), //END Spot Panel

        $(go.TextBlock,
          {
            row: 2, alignment: go.Spot.Center,
            maxSize: new go.Size(160, NaN),
            margin: 10,
            stroke: "white"
          },
          new go.Binding("text", "name")
        ),
        {
          toolTip:
            $("ToolTip",
              { "Border.stroke": colors["gray"], "Border.strokeWidth": 2 },
              $(go.TextBlock, { margin: 8, stroke: colors["gray"], font: "bold 16px sans-serif" },
                new go.Binding("text", "name")))
        }
      );//END Node Template

    // Groups represent racks where items (Nodes) can be placed.
    // Currently they are movable and resizable, but you can change that
    // if you want the racks to remain "fixed".
    // Groups provide feedback when the user drags nodes onto them.

    function highlightGroup(grp, show) {
      if (!grp) return false;
      // check that the drop may really happen into the Group
      var tool = grp.diagram.toolManager.draggingTool;
      grp.isHighlighted = show && grp.canAddMembers(tool.draggingParts);
      return grp.isHighlighted;
    }

    var groupFill = "rgba(128,128,128,0.2)";
    var groupStroke = "gray";
    var dropFill = "rgba(128,255,255,0.2)";
    var dropStroke = "red";

    myDiagram.groupTemplate =
      $(go.Group,
        {
          layerName: "Background",
          resizable: true, resizeObjectName: "SHAPE",
          // because the gridSnapCellSpot is Center, offset the Group's location
          locationSpot: new go.Spot(0, 0, CellSize.width / 2, CellSize.height / 2)
        },
        // always save/load the point that is the top-left corner of the node, not the location
        new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
        { // what to do when a drag-over or a drag-drop occurs on a Group
          mouseDragEnter: (e, grp, prev) => {
            if (!highlightGroup(grp, true)) e.diagram.currentCursor = "not-allowed"; else e.diagram.currentCursor = "";
          },
          mouseDragLeave: (e, grp, next) => highlightGroup(grp, false),
          mouseDrop: (e, grp) => {
            var ok = grp.addMembers(grp.diagram.selection, true);
            if (!ok) grp.diagram.currentTool.doCancel();
          }
        },
        $(go.Panel, "Spot",
          $(go.Panel, "Auto",
            { name: "SHAPE" },
            $(go.Shape,
              { fill: null, stroke: null, background: 'rgba(0,0,0,0)' },
              new go.AnimationTrigger('background')),

            $(go.Picture,  
              { margin: new go.Margin(0, 5, 0, 0), alignment: go.Spot.Center },
              { name: "SHAPE", desiredSize: new go.Size(100, 80) },            
              new go.Binding("source", "deviceTpyeID", nodeTypeImage),             
              new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
              new go.Binding("fill", "isHighlighted", h => h ? dropFill : groupFill).ofObject(),
              new go.Binding("stroke", "isHighlighted", h => h ? dropStroke : groupStroke).ofObject()
            ),
          ),  //END Auto Panel
        ),  //END Spot Panel
        $(go.TextBlock,
          {
            row: 2, alignment: go.Spot.Center,
            maxSize: new go.Size(160, NaN),
            margin: 10,
            stroke: "white"
          },
          new go.Binding("text", "name")
        ),
        {
          toolTip:
            $("ToolTip",
              { "Border.stroke": colors["gray"], "Border.strokeWidth": 2 },
              $(go.TextBlock, { margin: 8, stroke: colors["gray"], font: "bold 16px sans-serif" },
                new go.Binding("text", "name")))
        }
      ),

      // decide what kinds of Parts can be added to a Group
      myDiagram.commandHandler.memberValidation = (grp, node) => {
        if (grp instanceof go.Group && node instanceof go.Group) return false;  // cannot add Groups to Groups
        // but dropping a Group onto the background is always OK
        return true;
      },

      // what to do when a drag-drop occurs in the Diagram's background
      myDiagram.mouseDragOver = e => {
        if (!AllowTopLevel) {
          // OK to drop a group anywhere or any Node that is a member of a dragged Group
          var tool = e.diagram.toolManager.draggingTool;
          if (!tool.draggingParts.all(p => p instanceof go.Group ||
            (!p.isTopLevel && tool.draggingParts.contains(p.containingGroup)))) {
            e.diagram.currentCursor = "not-allowed";
          } else {
            e.diagram.currentCursor = "";
          }
        }
      },

      myDiagram.mouseDrop = e => {
        if (AllowTopLevel) {
          // when the selection is dropped in the diagram's background,
          // make sure the selected Parts no longer belong to any Group
          if (!e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true)) {
            e.diagram.currentTool.doCancel();
          }
        } else {
          // disallow dropping any regular nodes onto the background, but allow dropping "racks",
          // including any selected member nodes
          if (!e.diagram.selection.all(p => {
            return p instanceof go.Group || (!p.isTopLevel && p.containingGroup.isSelected);
          })) {
            e.diagram.currentTool.doCancel();
          }
        }
      }
    // start off with four "racks" that are positioned next to each other

    myDiagram.model = new go.GraphLinksModel([
      { key: "G1", isGroup: true, pos: "0 0", size: "8000 8000" },
      { key: "G2", isGroup: true, pos: "8000 0", size: "2000 5000" }
    ]);
    // this sample does not make use of any links
    // initialize the first Palette
    let myPaletteSmall =
      $(go.Palette, "myPaletteSmall",
        { // share the templates with the main Diagram          
          nodeTemplate: myDiagram.nodeTemplate,
          groupTemplate: myDiagram.groupTemplate
        },
        $(go.Panel, "Vertical",
          $(go.Panel, "Auto",
            { name: "SHAPE" },
            $(go.Shape,
              { fill: null, stroke: null, background: 'rgba(0,0,0,0)' },
              new go.AnimationTrigger('background')),

            $(go.Picture, 
              { margin: new go.Margin(0, 5, 0, 0), alignment: go.Spot.Center },
              { name: "SHAPE", desiredSize: new go.Size(100, 80) },
              new go.Binding("source", "deviceTpyeID", nodeTypeImage),             
            ), //END Auto Panel
          ), //END Vertical Panel

          $(go.TextBlock, { margin: 5, textAlign: "center", stroke: "white", font: 'bold 16px sans-serif' },
            new go.Binding("text", "name")),
        ));//END of Palette
    var green = '#B2FF59';
    var blue = '#81D4FA';
    var yellow = '#FFEB3B';
    // specify the contents of the Palette
    this.url_grp_view = environment.url_gojs_endterminal_get  //able to recieve the data in the two console logs below    
      .replace('{server_ip}', environment.server_ip)
      .replace('{server_port}', environment.server_port);
    myPaletteSmall.model = new go.GraphLinksModel([
      this.service.getRecords(this.url_grp_view).subscribe((res) => {
        debugger
        console.log(res);
        myPaletteSmall.model.nodeDataArray = res;
        this.rgwdata = res;
        console.log(this.rgwdata);
      })
    ]);
    }
}```

And html is as below: 
```<div style="width: 100%; display: flex; justify-content: space-between">
  <div style="width: 135px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black">
    <div class="tabs">
      <div class="tab">
        <input id="rd1" name="rd" checked="true">
        <label class="tab-label" for="rd1">DEVICES</label>
        <div class="tab-content">
          <div id="myPaletteSmall" style="width: 140px; height: 340px"></div>
        </div>
      </div>
      <!-- <div class="tab">
        <input type="radio" id="rd2" name="rd">
        <label class="tab-label" for="rd2">RADIO</label>
        <div class="tab-content">
          <div id="myPaletteTall" style="width: 140px; height: 340px"></div>
        </div>
      </div>
      <div class="tab">
        <input type="radio" id="rd3" name="rd">
        <label class="tab-label" for="rd3">FC</label>
        <div class="tab-content">
          <div id="myPaletteWide" style="width: 140px; height: 340px"></div>
        </div>
      </div>
      <div class="tab">
        <input type="radio" id="rd4" name="rd">
        <label class="tab-label" for="rd4">LINE</label>
        <div class="tab-content">
          <div id="myPaletteBig" style="width: 140px; height: 340px"></div>
        </div>
      </div> -->
    </div>
  </div>
  <div id='recordingDiagramDiv' style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
</div>
<div>
  Diagram Model saved in JSON format, automatically updated after each transaction:
<button id="savedModel" style="height:250px" onclick="save()">Save</button>
</div>
<script src = "go-debug.js"></script>```

And my JSON data would be something as below: 
{
        "id": 30,
        "name": "STX In1",
        "fullName": "",
        "deviceCategoryID": 33,
        "deviceTpyeID": 12,
        "siteID": 2,
        "description": "OPS",
        "dateCreated": "2023-02-13T14:47:57.000+08:00",
        "dateUpdated": "2023-08-04T15:35:35.000+08:00"
    },

 Request your help to understand and solve to retrieve the respective images based on switch case.

You are adding a Panel to a Palette. But you can only add a Panel or any other kind of non-Part GraphObject to a Panel, not to a Diagram or Palette.

Also, your group template has a “Spot” Panel holding only an “Auto” Panel. A “Spot” Panel should have at least two elements in it. I think you can just remove that “Spot” Panel and move the “Auto” Panel “up” in the visual tree.

Hi Walter,

Thanks, Removed the Panel and managed to workaround to overcome the Error without Panel in node Template.

Thanks,
Ganesh