Unexpected token while running karma-coverage on Typescript project

Question

I have a basic Angular/Typescript project with 12 rudimentary unit tests that run perfectly fine. Now I would like to get the coverage for these tests. I tried various approaches, and none of them worked, so I decided to start over with karma-coverage and ask for help here. :-)

Currently, when I run karma, I get an error message for every single source file that looks like this:

Failed to parse file: C:/Users/FRBA/Documents/MyProject/src/app/nav/new-panel/new-panel.component.ts
07 07 2017 07:54:35.832:ERROR [preprocessor.coverage]: Line 1: Unexpected token
  at C:/Users/FRBA/Documents/MyProject/src/app/nav/new-panel/new-panel.component.ts

My karma.conf.js looks like this:

var path = require('path');
module.exports = function (config) {
  config.set({
    files: [
      'src/app/**/*.ts',
      'test/app/**/*.ts'
    ],
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-ie-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular/cli/plugins/karma')
    ],
    client: {
      clearContext: false
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml', 'coverage'],
    preprocessors: {
      'src/app/**/*.ts': ['coverage']
    },
    coverageReporter: {
      type : 'html',
      dir : 'coverage/'
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome', 'IE'],
    singleRun: false
  });
};

Like I said, I have tried various approaches already - karma-coverage, karma-coverage-istanbul-reporter, karma-typescript, etc., and I always end up with various problems (karma generating empty reports, karma stopping to execute after the "10% building modules" line, and so on), so it seems I am doing something fundamentally wrong. Any additional pointers or tutorials that explain this to a karma (and Typescript) newbie would be appreciated. Thanks a lot!

Answer 1

As mentioned in the karma-typescript docs under configuration, you need to add karma-typescript as a preprocessor. If you are testing TypeScript files (which I am assuming you are judging from the .ts extension), you need to transpile them into JavaScript for downstream processors to be able to parse them. The unexpected token error likely references a token that is only valid in TypeScript.