Angular 17集成AG Charts报错：无法解析全局window

这个错误的核心原因是AG Charts初始化时依赖浏览器的window对象，但组件可能在非浏览器环境（比如SSR服务器端）或过早的时机（构造函数阶段）尝试创建图表配置，导致window未被正确识别。以下是具体解决方法：

1. 延迟图表配置初始化到浏览器环境中 #

不要在constructor中初始化图表配置，改用ngOnInit钩子，并通过Angular的平台判断工具确保仅在浏览器环境下执行初始化：

修改后的组件代码 #

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

@Component({
    selector: 'view-survey',
    template: '<ag-charts-angular style="height: 400px" [options]="options"></ag-charts-angular>',
    standalone: true,
    imports: [CommonModule, AgChartsAngular],
    providers: [],    
})
export class ViewSurveyComponent implements OnInit, OnDestroy {
    public options?: AgChartOptions;

    constructor(@Inject(PLATFORM_ID) private platformId: Object) { }
    
    ngOnInit() {   
        // 仅在浏览器环境下初始化图表配置
        if (isPlatformBrowser(this.platformId)) {
            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",
                  },
                ],
              };
        }
    }

    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 },
        ];
    }
}

2. 调整图表容器高度 #

注意模板中style="height: 100%"需要父容器也设置明确高度，否则图表可能无法正常显示。示例中改为固定高度400px，你可以根据布局需求调整。

3. 若使用SSR，额外配置兼容 #

如果你的Angular 17项目启用了SSR（服务器端渲染），需要在server.ts中将AG Charts模块标记为外部依赖，避免服务器端尝试执行浏览器相关代码：

在server.ts中添加：

export default defineServerConfig({
  external: ['ag-charts-community', 'ag-charts-angular'],
});

或者如果不需要SSR，可以通过以下命令关闭：

ng generate app-shell --skip-ssr

内容的提问来源于stack exchange，提问作者simple user