Highcharts in Angular 19 throwing SSR console error

Discussão em 'Angular' iniciado por user2052283, Novembro 29, 2024.

  1. user2052283

    user2052283 Guest

    I've got a simple highchart drawing a pie chart in the UI and everything is working well but the console is getting plagued with this error whenever rendering my chart. Is there something I can do to fix this?

    ERROR TypeError: Cannot read properties of undefined (reading 'createEvent')
    at j (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\highcharts.js:168:32)
    at aR.init (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\highcharts.js:6533:11)
    at new aR (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\highcharts.js:6520:76)
    at Object.chart (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\highcharts.js:6515:18)
    at _HighchartsChartComponent.updateOrCreateChart (C:\Users\mgrac\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\highcharts-angular.js:50:68)
    at _HighchartsChartComponent.wrappedUpdateOrCreateChart (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\highcharts-angular.js:43:12)
    at _HighchartsChartComponent.ngOnChanges (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\highcharts-angular.js:31:12)
    at _HighchartsChartComponent.rememberChangeHistoryAndInvokeOnChangesHook (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\chunk-NONX6MLK.js:3696:10)
    at callHookInternal (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\chunk-NONX6MLK.js:4282:10)
    at callHook (C:\Users\mg\Dev\challenge\.angular\cache\19.0.2\challenge\vite\deps_ssr\chunk-NONX6MLK.js:4300:5)


    My component TS

    import { HighchartsChartModule } from 'highcharts-angular';
    import * as Highcharts from 'highcharts';

    @Component({
    selector: 'app-progress-chart',
    imports: [CommonModule, HighchartsChartModule],
    templateUrl: './progress-chart.component.html',
    styleUrl: './progress-chart.component.css'
    })
    export class ProgressChartComponent {

    isHighcharts = typeof Highcharts === 'object';
    Highcharts: typeof Highcharts = Highcharts;
    chartOptions: Highcharts.Options = {...}


    My component HTML

    <highcharts-chart
    *ngIf="isHighCharts"
    [Highcharts]="Highcharts"
    [options]="chartOptions">
    </highcharts-chart>```

    Continue reading...

Compartilhe esta Página