Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 17 ReferenceError: window is not defined #419

Open
firegreen opened this issue Mar 26, 2024 · 2 comments
Open

Angular 17 ReferenceError: window is not defined #419

firegreen opened this issue Mar 26, 2024 · 2 comments

Comments

@firegreen
Copy link

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
Copy link
Author

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
Copy link

sameert89 commented Mar 28, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants