Angular SSR NgApexcharts SVG is not defined

Question

Originally I was having issues with this package using Angular SSR as I was getting this error on import Window is not defined

However, you can mock this in server.ts via the following:

const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();
global.window = mock.getWindow();

I'm now getting an error as stated in the title, SVG is not defined. IS there any way to mock this?

I believe it uses https://github.com/svgdotjs/ under the hood

Thanks

Answer 1

Using ng-apexcharts, I still get the ReferenceError: SVG is not defined error. So this is what I tried and seems to be working.

1. I'm NOT importing NgApexchartsModule

2. template.html

<div id="chart" *ngIf="isBrowser"></div>

3. component.ts

constructor(@Inject(PLATFORM_ID) platformId: object) {
    this.isBrowser = isPlatformBrowser(platformId);
}

...

if (this.isBrowser) {
    const ApexCharts = require('apexcharts');
    const chart = new ApexCharts(document.querySelector('#chart'), this.options);
    chart.render();
}