Angular集成GrapeCity ActiveReportsJS致CI构建内存溢出求助

问题背景 #

Angular 15.1.1项目集成@grapecity/activereports ^4.0.2，本地运行及ng test均正常，但GitHub CI/CD执行ng test时触发内存溢出错误：

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

以下是无需扩容Node内存的可行解决方案：

1. 测试环境Mock ActiveReports Viewer #

测试阶段无需实际渲染报表，直接Mock掉Viewer类，避免初始化时的高内存占用。在组件的.spec.ts文件中添加如下代码：

import { Viewer } from '@grapecity/activereports/reportviewer';

// Mock Viewer类，仅保留必要方法的空实现
jest.mock('@grapecity/activereports/reportviewer', () => ({
  Viewer: jest.fn().mockImplementation(() => ({
    toggleSidebar: jest.fn(),
    toggleToolbar: jest.fn(),
    availableExports: [],
    renderMode: 'Galley',
    open: jest.fn()
  }))
}));

2. 仅在非测试环境初始化Viewer #

在组件的ngOnInit中判断环境，跳过测试环境下的Viewer初始化逻辑：

ngOnInit() {
  // 检测是否为测试环境（兼容Jest/Karma）
  const isTestEnv = typeof jest !== 'undefined' || (window as any).__karma__;
  if (!isTestEnv) {
    this.viewer = new Viewer('#viewer-host');
    this.viewer.toggleSidebar();
    this.viewer.toggleToolbar();
    this.viewer.availableExports = ['pdf'];
    this.viewer.renderMode = 'Galley';
    this.viewer.open(report.rdlx-json);
  }
}

3. 调整测试配置，降低资源消耗 #

修改angular.json中的测试配置，关闭并行测试和不必要的代码覆盖率：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "parallel": false,
    "codeCoverage": false,
    "watch": false
  }
}

同时在GitHub CI的工作流文件中，给测试命令添加--no-parallel参数：

- name: Run Angular tests
  run: ng test --no-parallel --watch=false

4. 组件销毁时清理Viewer资源 #

实现OnDestroy生命周期，销毁Viewer实例避免内存泄漏：

import { OnInit, OnDestroy } from '@angular/core';
import { Viewer } from '@grapecity/activereports/reportviewer';

export class ReportViewerComponent implements OnInit, OnDestroy {
  private viewer: Viewer | null = null;

  ngOnInit() {
    this.viewer = new Viewer('#viewer-host');
    // 原有配置逻辑
  }

  ngOnDestroy() {
    if (this.viewer) {
      this.viewer.destroy(); // 调用ActiveReports的销毁方法释放资源
      this.viewer = null;
    }
  }
}

内容的提问来源于stack exchange，提问作者Hitesh Kachhadiya