如何在Angular Karma测试中配置preserveWhitespace？全局设置未生效

我之前也踩过这个坑！全局配置在主应用里明明生效，但测试环境就是不买账，折腾了好一会儿才捋清楚门道。下面是几个亲测有效的解决办法，按顺序试应该能搞定你的问题：

1. 直接在angular.json的测试配置中指定编译器选项 #

Angular的测试构建会单独读取angular.json里的test配置块，这里的设置优先级最高。打开angular.json，找到projects -> [你的项目名] -> architect -> test，添加angularCompilerOptions配置：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js",
    "angularCompilerOptions": {
      "preserveWhitespaces": false
    }
    // 保留其他原有配置
  }
}

修改完记得重启测试服务（关掉ng test再重新启动），配置才会生效。

2. 修正tsconfig.spec.json的配置 #

如果上面的方法没起作用，检查你的tsconfig.spec.json，确保angularCompilerOptions和compilerOptions同级放置，并且明确设置了preserveWhitespaces: false：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    // 保留原有编译选项
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ]
  // 保留其他配置
}

注意如果这个文件继承了主tsconfig.json，主配置里的对应选项也得是false，不过单独在spec文件里设置的优先级更高。

3. 在test.ts中全局覆盖组件默认配置 #

要是前两种方法都不行，可以直接在测试入口文件src/test.ts里修改Angular组件的默认配置，让所有测试组件自动继承这个设置：

import { Component } from '@angular/core';

// 全局覆盖组件装饰器的默认空格保留配置
Component({ preserveWhitespaces: false } as any);

这段代码会修改组件装饰器的默认参数，所有通过TestBed创建的组件都会自动应用preserveWhitespaces: false，不用每个测试单独配置。

4. 单个测试的临时调整（可选） #

如果只是个别测试需要特殊处理（虽然你要的是全局），可以在TestBed的组件声明中单独设置：

TestBed.configureTestingModule({
  declarations: [
    // 给目标组件单独指定空格配置
    Component({ selector: 'app-test', template: '<div>test</div>', preserveWhitespaces: false })(TestComponent)
  ]
});

不过这属于权宜之计，全局配置还是前面的方法更省心。

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