ERROR Error: AG Charts - unable to resolve global window

Question

I have Angular 17 Project. I want to display some charts in it. So I have installed following modules in my project

1. npm i ag-charts-community
2. npm install ag-charts-angular

I am trying to use existing example from AG Charts as written below:-

TS File

import { Component, OnInit, OnDestroy} from '@angular/core';
import { AgChartsAngular } from "ag-charts-angular";
import { AgChartOptions } from "ag-charts-community";

import { CommonModule } from '@angular/common';

import { getData } from "./data";

@Component({
    selector: 'view-survey',
    // templateUrl: './viewsurvey.component.html',
    template: '<ag-charts-angular style="height: 100%" [options]="options"></ag-charts-angular> ',
    standalone: true,
    imports: [
        CommonModule, 
        AgChartsAngular,               
    ], 
    providers: [],    
})

export class ViewSurveyComponent implements OnInit, OnDestroy {
    public options:AgChartOptions;

    constructor() {     
        this.options = {
            title: {
              text: "Apple's Revenue by Product Category",
            },
            subtitle: {
              text: "In Billion U.S. Dollars",
            },
            data: this.getData(),
            series: [
              {
                type: "bar",
                direction: "horizontal",
                xKey: "quarter",
                yKey: "iphone",
                yName: "iPhone",
              },
              {
                type: "bar",
                direction: "horizontal",
                xKey: "quarter",
                yKey: "mac",
                yName: "Mac",
              },
              {
                type: "bar",
                direction: "horizontal",
                xKey: "quarter",
                yKey: "ipad",
                yName: "iPad",
              },
              {
                type: "bar",
                direction: "horizontal",
                xKey: "quarter",
                yKey: "wearables",
                yName: "Wearables",
              },
              {
                type: "bar",
                direction: "horizontal",
                xKey: "quarter",
                yKey: "services",
                yName: "Services",
              },
            ],
          };

    }
    
    ngOnInit() {   
        
    }

    ngOnDestroy() {
       
    }

    getData()
    {
return [
      {
        quarter: "Q1'18",
        iphone: 140,
        mac: 16,
        ipad: 14,
        wearables: 12,
        services: 20,
      },
      {
        quarter: "Q2'18",
        iphone: 124,
        mac: 20,
        ipad: 14,
        wearables: 12,
        services: 30,
      },
      {
        quarter: "Q3'18",
        iphone: 112,
        mac: 20,
        ipad: 18,
        wearables: 14,
        services: 36,
      },
      {
        quarter: "Q4'18",
        iphone: 118,
        mac: 24,
        ipad: 14,
        wearables: 14,
        services: 36,
      },
    ];
    }
}

I am getting below error which I am not able to resolve

ERROR Error: AG Charts - unable to resolve global window
    at ChartOptions.specialOverridesDefaults (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/ag-charts-community/dist/package/main.esm.mjs:3534:13)
    at ChartOptions (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/ag-charts-community/dist/package/main.esm.mjs:3135:34)
    at Function.createOrUpdate (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/ag-charts-community/dist/package/main.esm.mjs:32475:26)
    at Function.create (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/ag-charts-community/dist/package/main.esm.mjs:32375:36)
    at eval (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/ag-charts-angular/fesm2020/ag-charts-angular.mjs:16:56)
    at _ZoneDelegate.invoke (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/zone.js/fesm2015/zone-node.js:368:26)
    at _Zone.run (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/zone.js/fesm2015/zone-node.js:130:43)

    at context (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/@angular/core/fesm2022/core.mjs:14320:28)     
    at AgChartsAngular.runOutsideAngular (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/ag-charts-angular/fesm2020/ag-charts-angular.mjs:62:38)
    at AgChartsAngular.ngAfterViewInit (g:/onmytune/IP/InsightsGather.com/Angular17-InsightsGather/node_modules/ag-charts-angular/fesm2020/ag-charts-angular.mjs:16:23)

Can you please help what am I missing here?

Answer 1

Use Angular's PLATFORM_ID to determine if your code is running on the server or in the browser. Initialize AG Charts only if you're in the browser.

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-my-chart',
  template: `<ag-charts-angular *ngIf="isBrowser" [options]="options"></ag-charts-angular>`
})
export class MyChartComponent {
  public options: any;
  public isBrowser: boolean;

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

  ngOnInit() {}
}