0

I am trying to implement an application where a graph will be generated by y files on the server side and the user shall be able to download it as a pdf. I am using angular universal for this. The application is working on the browser that is the graph is being rendered at the browser, but not on the server side. On the server side I am getting the following error

ERROR ReferenceError: SVGGElement is not defined

But if I initialize "SVGGElement" as following in my server.ts

global["SVGGElement"] = win.SVGGElement;

i get the following error

ERROR TypeError: Right-hand side of 'instanceof' is not an object

I know yfiles is not for server side rendering but it would be great if this can be accomplished.

Radowan Mahmud Redoy
  • 166
  • 7
  • 1
    Does it **need** to be rendered during SSR? Otherwise just use `*ngIf` to hide it/only show it when `!isPlatformServer(this.platformId)` where `PLATFORM_ID` is the injectiontoken – Pieterjan Oct 25 '22 at 06:13
  • Yes, I need the ssr implementation as our main target is to generate the graph on server side and store it as a pdf in cloud. – Radowan Mahmud Redoy Oct 25 '22 at 09:48

1 Answers1

1

As with all HTML5 code that depends on a compliant HTML5 implementation, not all yFiles functionality will work in node.js, which is not an HTML5 compatible implementation. Specifically what is missing here is a working (SVG) DOM implementation. If you manage to find a working one, you will be able to run it on the server, too. To the best of my knowledge, at the time of writing this, for node.js there is none, though.

You can use a headless browser like puppeteer on the server, instead.

That said: yFiles for HTML is inherently meant to be used on the client side. After all it's an interactive graph visualization that can be interacted with. As such it cannot be SSRed, apart from the DOM element that will host the visualization in the running User Agent. It's like saying I cannot render the whole mp4 on the server side, when all you should do is include the tag in your SSR. If you want a static picture of a graph as an SVG, created on the server side, use a platform that supports SVG, like puppeteer. Otherwise, just include the container element (<div id="someId"></div or <yfiles-graph id="someId"></yfiles-graph>)and let yFiles do its magic on the client side.

Sebastian
  • 7,729
  • 2
  • 37
  • 69