Angular服务Karma测试报错：Zone is not defined 求解决

错误信息 #

An error was thrown in afterAll
  Uncaught ReferenceError: Zone is not defined
  ReferenceError: Zone is not defined

已尝试Stack Overflow及其他平台的常规解决方案，但均无效。以下是当前配置文件：

Karma配置文件（karma.conf.js） #

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {

  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/core-services-lib'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

test.ts文件 #

import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';


(window as any).global = window;



declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    keys(): string[];
    <T>(id: string): T;
  };
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

针对性修复步骤 #

1. 统一Zone.js导入，避免重复冲突 #

zone.js/dist/zone-testing已经包含了所有Angular测试所需的Zone补丁和基础Zone功能，无需单独导入其他zone子模块。修改test.ts的导入部分：

// 只保留这一行，删除其他所有zone.js/dist/xxx的导入
import 'zone.js/dist/zone-testing';

import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// 其余代码不变

2. 检查Zone.js与Angular版本兼容性 #

不同Angular版本对应固定的Zone.js版本范围，版本不匹配会导致全局Zone未正确挂载：

• 执行npm list zone.js查看当前版本
• 对照Angular版本安装对应Zone.js：
  • Angular 12/13 → zone.js ~0.11.x
  • Angular 14/15 → zone.js ~0.11.x 或 ~0.12.x
  • Angular 16+ → zone.js ~0.13.x
• 安装命令示例：npm install zone.js@0.13.3 --save-dev

3. 清理测试缓存与依赖 #

缓存或损坏的依赖可能导致Zone.js未正确加载：

1. 删除node_modules和package-lock.json：

   rm -rf node_modules package-lock.json
   

2. 重新安装依赖：

   npm install
   

3. 无缓存运行测试：

   npm run test -- --no-cache
   

4. 排查第三方库的Zone依赖 #

如果项目中使用了第三方UI库或自定义服务，检查是否有代码直接全局调用Zone但未确保Zone.js已加载。可以在test.ts的最顶部添加全局Zone的兜底声明（临时排查用）：

declare var Zone: any;
import 'zone.js/dist/zone-testing';
// 其余代码不变

如果添加后错误消失，说明某个第三方库在Zone.js加载前就尝试访问了全局Zone，需要调整该库的导入顺序或在其代码中添加Zone存在性判断。

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