Angular 17 ReferenceError: window is not defined

[firegreen]

Hi ngx-echarts team, I'm using ngx-echarts 17.1.0 with Angular 17.3.1 When I use a echart component, I meet the following error in the SSR service

ERROR ReferenceError: window is not defined
    at _NgxEchartsDirective.ngOnInit (/root/workspace/takeawaste_exercice/client/node_modules/ngx-echarts/fesm2022/ngx-echarts.mjs:119:5)

because the window variable is not available here is the html

<echarts [options]="chartOption" class="taw-chart" (chartInit)="onChartInit($event)" [loading]="isLoading"></echarts>

and the ts component

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, NgxEchartsDirective],
  host: {ngSkipHydration: 'true'},
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss',
  providers: [
    provideEcharts(),
  ]
})
export class DashboardComponent {
  chartOption: EChartsOption = {
    xAxis: {
      type: 'time'
    },
    yAxis: {
      type: 'value',
    },
    series: [],
    loading: true
  };
  chart!: ECharts;
  isLoading: boolean = false;

  onChartInit(chart: ECharts)
  {
    this.chart = chart;
  }
}

Is there a way to fix that ?

Thanks.

[firegreen]

I've also tried to use Component Outlet to dynamically load the component only if it's on the browser but I've got this error:

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.echarts_component = NgxEchartsDirective;
      this.echarts_inputs = {
        options: this.chartOption,
        chartInit: this.onChartInit,
        loading: this.isLoading
      }
    }
  }

ASSERTION ERROR: Provided Component class doesn't contain Component definition. Please check whether provided class has @Component decorator

[sameert89]

The issue stems from the use of SSR, server does not have a window object. The only fix I was able to do was not use SSR. Not much we can do unless the author brings SSR support.