Can't get custom shapes to work with Angular 15+

[mossy426]

https://stackblitz.com/edit/angular-pxlb2c?file=src%2Fforce-graph%2Fforce-graph.component.html

I'm trying to use the built-in default shapes and custom shapes. However it shows that svgDefs is not defined for the container (at least in angular 17. When using angular 15 I get no errors, but nothing appears when I try to use a custom shape. For instance I'll return "circle" or "square" for some nodes, but then use the custom defined svg like diamond. Here's what I'm doing in my code:

 svgDefs = `
    <path id="blob" d="M 19.415 1.0564 C 20.585 2.47 20.225 5.89 21.665 8.2612 C 23.06 10.678 26.345 12.046 28.325 14.554 C 30.305 17.1076 31.025 20.8012 28.865 21.9412 C 26.75 23.1268 21.755 21.7588 18.605 23.3092 C 15.455 24.8596 14.105 29.3284 12.485 29.8756 C 10.865 30.3772 8.93 27.0028 6.41 25.042 C 3.89 23.1268 0.83 22.6708 0.38 20.9836 C -0.07 19.2964 2.135 16.378 2.54 13.642 C 2.945 10.9516 1.55 8.4892 2.135 7.03 C 2.72 5.5708 5.285 5.1148 7.355 4.294 C 9.47 3.4276 11.135 2.1964 13.34 1.2388 C 15.545 0.3268 18.245 -0.3116 19.415 1.0564 Z"/>
    <path id="cloud" d="M 14 -1 A 9 9 90 0 0 5 8 A 9 9 90 0 0 5.1055 9.3125 A 6 6 90 0 0 1 15 A 6 6 90 0 0 7 21 L 22 21 A 7 7 90 0 0 29 14 A 7 7 90 0 0 22.9414 7.0703 A 9 9 90 0 0 14 -1 z"/>
    <polygon id="diamond" points="0,15 15,0 30,15 15,30"/>
    <polygon id="house" points="4,18 4,30 13,30 13,24 17,24 17,30 26,30 26,18 30,18 15,0 0,18"/>
    `
    
public getNodeShape( node : any ) {

        //* Shapes:
        let symbolVariable = this.widgets['node-symbol-variable'];

        if(symbolVariable == "None") {
            return this.selectedNodeShape;
        } else {

           let type = this.visuals.twoD.commonService.temp.style.nodeSymbolMap(node[symbolVariable]);

           switch(type) {
            case 'symbolCircle':
                return 'circle';
            case 'symbolSquare':
                return 'square';
            case 'symbolHexagon':
                return 'hexagon';
            case 'symbolTriangle':
                return 'triangle';
            case 'symbolDiamond':
                return `<use href="#diamond" stroke-width="3" />`;
           }

        }

I've also provided a stackblitz to try to get it working, but could not.

[rokotyan]

@mossy426 Thanks for pointing this out, I was able to figure out the problem. Will fix it soon

[rokotyan]

@mossy426 Could you try version 1.4.5-beta.0 and tell if it works?