Angular 6中Karma Runner无法识别tsconfig.json的ES6模块路径如何解决？

我来帮你分析这个问题并给出解决方案：

首先，问题的核心在于Karma在加载karma.config.ts时，并没有自动应用你tsconfig里的paths映射规则。虽然你的项目tsconfig里配置了test-config指向dist/test-config，但Angular的Karma构建器在处理配置文件本身的导入时，并不会默认解析这些路径别名。

下面是几个可行的解决办法，按推荐顺序排列：

1. 使用tsconfig-paths手动注册路径映射 #

这是最直接的方案，通过tsconfig-paths模块让Node.js能识别tsconfig里的路径别名：

• 首先安装依赖：

  npm install tsconfig-paths --save-dev
  

• 修改你的karma.config.ts，在导入test-config之前先注册路径规则：

  // 先加载并注册tsconfig路径
  import * as tsconfigPaths from 'tsconfig-paths';
  const tsConfig = require('./projects/components/tsconfig.json'); // 对应angular.json里指定的测试tsconfig路径
  
  tsconfigPaths.register({
    baseUrl: tsConfig.compilerOptions.baseUrl,
    paths: tsConfig.compilerOptions.paths
  });
  
  // 现在可以正常导入了
  import { ExtendedKarmaConfig } from "test-config";
  

2. 确保dist/test-config在测试前已生成 #

你的路径映射指向dist/test-config，如果这个目录是通过构建命令生成的（比如ng build某个子项目），那ng test可能在构建完成前就执行了，导致模块找不到。

解决方法是在package.json里添加预测试脚本，先构建出dist/test-config：

{
  "scripts": {
    "pretest": "ng build test-config", // 替换成实际生成dist/test-config的构建命令
    "test": "ng test"
  }
}

这样每次运行npm test时，都会先执行pretest里的构建命令，确保目标目录存在。

3. 临时改用相对路径验证 #

如果上面的方法暂时没生效，可以先改用相对路径导入test-config，验证模块本身是否存在：

// 替换成实际相对路径，比如从karma.config.ts到dist/test-config的路径
import { ExtendedKarmaConfig } from "../../dist/test-config";

如果这样能成功导入，说明确实是路径映射的解析问题，再回头处理tsconfig-paths的配置即可。

4. 确认测试用tsconfig包含paths配置 #

检查你angular.json里指定的tsConfig: "projects/components/tsconfig.json"这个文件，确保它确实包含paths配置。有时候根目录的tsconfig和项目目录的tsconfig是分开的，可能你只在根目录的tsconfig里加了paths，而测试用的tsconfig里没有。

把根目录tsconfig里的paths配置复制到projects/components/tsconfig.json中：

{
  "compilerOptions": {
    // ...其他配置
    "paths": {
      "test-config": [ "dist/test-config" ]
    }
  }
}

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