Error trying to build server side rendering angular 9

[vasiliy-maslov]

I got the same error and a few more when using amcharts 4. The server folder is not generated when the build part of the distribution kit for server rendering is build.
The commands that I ran:
ng add @ nguniversal / express-engine
npm run build: ssr && npm run serve: ssr

Demo: https://github.com/vasiliy-maslov/amcharts-angular-universal-error

Exceptions and warnings:

WARNING in ./node_modules/jsdom/node_modules/ws/lib/buffer-util.js
Module not found: Error: Can't resolve 'bufferutil' in '/home/maslov/WebstormProjects/angular-universal/node_modules/jsdom/node_modules/ws/lib'

WARNING in ./node_modules/jsdom/node_modules/ws/lib/validation.js
Module not found: Error: Can't resolve 'utf-8-validate' in '/home/maslov/WebstormProjects/angular-universal/node_modules/jsdom/node_modules/ws/lib'

ERROR in ./node_modules/canvg/dist/node/canvg.js
Module not found: Error: Can't resolve 'canvas' in '/home/maslov/WebstormProjects/angular-universal/node_modules/canvg/dist/node'

ERROR in ./node_modules/jsdom/lib/jsdom/utils.js
Module not found: Error: Can't resolve 'canvas' in '/home/maslov/WebstormProjects/angular-universal/node_modules/jsdom/lib/jsdom'

ERROR in ./node_modules/canvg/dist/node/canvg.js
Module not found: Error: Can't resolve 'xmldom' in '/home/maslov/WebstormProjects/angular-universal/node_modules/canvg/dist/node'

Originally posted by @vasiliy-maslov in #2027 (comment)

[wizquest-labs]

@vasiliy-maslov can you try to update your webpack.server.ts file to exclude these libraries from server.ts?

For e.g.
externals: [ {
canvas: "commonjs canvas" // Important (2)
}]

Ref: Automattic/node-canvas#1314

[dssagar93]

@wizquest-labs It didnt work for me.
@vasiliy-maslov Did you find any solution for Angular SSR? I am getting same error while running npm run build:ssr

[vasiliy-maslov]

@dssagar93 Unfortunately not. I had to use another library.

[Pauan]

@vasiliy-maslov Thanks a lot for the demo, it helps a lot! We've spent the past few days looking into this, but it's really complicated because it's not an issue with amCharts, instead it's an issue with one of our dependencies (canvg).

The issue is further complicated because this issue only happens with canvg 2.0, not canvg 3.0. But we can't upgrade to canvg 3.0 because the TypeScript team released a breaking change in version 3.7. We've been looking for a workaround for that.

[Pauan]

We managed to fix the issue with canvg, and the fix will be in the next release, thanks for the report!

[KaotiKcr]

@Pauan when can we expect the next release?
what is the suggested workaround?

[martynasma]

@Pauan when can we expect the next release?
what is the suggested workaround?

We don't have a set date, but it will be at some point this week.

[dssagar93]

Is there any temporary fix available or do I need to wait for the next release?

[martynasma]

Not that I'm aware of. Sorry. Hopefully we'll get the new version out soon.

[dssagar93]

Ok thanks !

[martynasma]

Fixed in 4.9.11.

[4.9.11] - 2020-03-24

Added

• Export: Added disabled property to all format options so you can disable each particular export format easily, e.g.: chart.exporting.getFormatOptions("csv").disabled = true.
• New property on all Sprite elements: userClassName. If set, will also set element's class accordingly. Works directly, and via propertyFields.

Fixed

• Fixed error with Angular Server Side Rendering (Angular Universal).
• Accessibility: minor role issue fixed for items in ExportMenu.
• It was impossible to change heat rule's min and max values after the rule was added.
• Changing category of axisRange after it was alrady added to axis was not working.

Full change log.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.

[coremicroservices]

this problem is with ng2-pdf-viewer library, I have used iframe as a aworkaround

[mac4281]

I am having this same issue with html2canvas as well.