如何在无karma.conf.js的Angular 16项目中添加Karma插件

Angular 16 CLI创建的新项目默认采用了整合式配置，Karma相关设置不再单独存放在karma.conf.js和src/test.ts中，而是统一管理在angular.json文件内。按以下步骤即可完成插件配置：

1. 安装依赖包 #

在项目根目录执行命令安装karma-teamcity-reporter：

npm install karma-teamcity-reporter --save-dev
# 或使用yarn
yarn add karma-teamcity-reporter --dev

2. 修改angular.json配置 #

找到项目配置节点projects -> [你的项目名称] -> architect -> test，调整以下配置项：

• 在options中添加reporters数组，包含teamcity；
• 在options中添加plugins数组，引入karma-teamcity-reporter；
• 可直接在配置里指定browsers: "ChromeHeadless"和watch: false，也可后续通过命令行参数覆盖。

修改后的配置示例：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.spec.json",
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["src/styles.css"],
    "scripts": [],
    "reporters": ["teamcity"],
    "plugins": [
      "karma-jasmine",
      "karma-chrome-launcher",
      "karma-jasmine-html-reporter",
      "karma-coverage",
      "karma-teamcity-reporter"
    ],
    "browsers": "ChromeHeadless",
    "watch": false
  }
}

3. 执行测试命令 #

直接运行以下命令，即可在TeamCity环境中生成符合要求的测试报告：

ng test --watch=false --browsers=ChromeHeadless --reporters=teamcity

如果已经在angular.json中配置好上述参数，也可简化为：

ng test

可选：生成独立的karma.conf.js文件 #

若你更偏好旧项目的独立配置文件模式，可通过CLI生成：

ng generate config karma

生成后项目根目录会出现karma.conf.js，此时可像旧项目一样在plugins数组中添加require('karma-teamcity-reporter')，同时在angular.json的test配置里指定karmaConfig: "karma.conf.js"即可。

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