Angular SSR NgApexcharts SVG is not defined

user_10430624 0
Viewed 682

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

apexcharts angular server-side-rendering javascript
1 Answers

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>
  1. 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();
}
user_19588820
Related