Angular执行ng test时因environment.ts中window.env未定义报错

问题背景 #

项目通过environment.ts从Kubernetes YAML读取环境配置，代码如下：

export const environment = {
  PROD_URL: window["env"].prodUrl || 'http://localhost:8080/v1/'
};

执行ng test命令时触发以下错误：

An error was thrown in afterAll
Uncaught TypeError: Cannot read property 'prodUrl' of undefined
TypeError: Cannot read property 'prodUrl' of undefined
at Module.AytR (http://localhost:9876/karma_webpack/webpack:/src/environments/environment.ts:9:30)

解决办法 #

方法1：给Karma添加测试环境初始化脚本 #

修改karma.conf.js配置，在测试加载前注入window.env的默认值：

// karma.conf.js
module.exports = function(config) {
  config.set({
    // ...其他原有配置
    files: [
      // 新增初始化脚本，放在其他文件前面
      'src/test-env-setup.js',
      // ...原有文件列表
    ]
  });
};

然后在src目录下创建test-env-setup.js：

window.env = {
  prodUrl: 'http://localhost:8080/v1/'
};

方法2：修改environment.ts的取值逻辑 #

直接在环境文件里增加空值校验，避免访问未定义的window.env：

// TS 3.7+支持的可选链写法
export const environment = {
  PROD_URL: window["env"]?.prodUrl || 'http://localhost:8080/v1/'
};

// 兼容老版本TS的写法
export const environment = {
  PROD_URL: (window["env"] && window["env"].prodUrl) || 'http://localhost:8080/v1/'
};

方法3：在测试入口文件全局初始化 #

在Angular默认的测试入口src/test.ts开头添加初始化代码（需放在其他import之前）：

// src/test.ts
(window as any).env = {
  prodUrl: 'http://localhost:8080/v1/'
};

// ...原有测试入口代码
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
// ...

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