Angular 4运行Karma测试失败：遇到意外令牌错误

嘿，我之前在搭建Angular 4的Karma+Jasmine测试环境时，也踩过这个“模块解析失败”的坑！这个错误本质上是你的Webpack不知道怎么处理.spec.ts文件里的Angular专属语法（比如装饰器、TypeScript特性），或者Karma配置没正确关联到能处理这些文件的加载器。我给你梳理几个必查的关键点：

1. 先确认核心依赖是否安装齐全 #

Angular 4的测试依赖TypeScript加载器、Angular模板处理工具，还有Karma与Webpack的桥接包，必须确保安装了这些开发依赖：

npm install --save-dev ts-loader @types/jasmine jasmine-core karma-webpack angular2-template-loader html-loader raw-loader

这里解释下关键包的作用：

• ts-loader：处理TypeScript文件转译
• angular2-template-loader：解析Angular组件里的templateUrl和styleUrls，把模板嵌入JS
• html-loader/raw-loader：处理组件的HTML模板和CSS样式

2. 完善Webpack配置（你的./app/webpack.config.js） #

确保Webpack能识别并处理.ts（包括.spec.ts）、.html、.css文件，添加以下规则：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader', 'angular2-template-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.css$/,
        use: 'raw-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js'] // 让Webpack自动解析这些后缀
  }
};

3. 补全Karma配置的关键项 #

你给出的Karma配置不完整，需要补充文件入口、预处理器关联，以及Webpack的集成设置：

var webpackConfig = require("./app/webpack.config.js");

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'], // 必须包含jasmine测试框架
    files: [
      // 先加载Angular 4需要的polyfill
      './app/polyfills.ts',
      // 匹配所有.spec.ts测试文件
      './app/**/*.spec.ts'
    ],
    preprocessors: {
      // 所有TS文件都通过Webpack预处理
      './app/**/*.ts': ['webpack']
    },
    webpack: webpackConfig, // 关联你的Webpack配置
    webpackMiddleware: {
      stats: 'errors-only' // 只输出错误信息，减少冗余日志
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'], // 可替换成你常用的浏览器
    singleRun: false
  });
};

4. 检查tsconfig.json的关键配置 #

Angular依赖装饰器特性，必须在TypeScript配置里开启：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true, // 必须开启
    "experimentalDecorators": true, // 必须开启
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "include": ["app/**/*.ts"],
  "exclude": ["node_modules"]
}

5. 最后验证测试脚本 #

在package.json里添加测试命令：

"scripts": {
  "test": "karma start karma.conf.js"
}

然后运行npm test，应该就能正常解析测试文件了。

另外，错误提示里提到的main.spec.ts第13行第8列，也可以先检查下这个位置有没有语法错误（比如漏写分号、装饰器格式错误），有时候语法问题也会触发加载器报错。

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