Unexpected token when starting karma coverage in Typescript project

Question

Unexpected token when starting karma coverage in Typescript project

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

Currently, when I start karma, I get an error message for each source file, which 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 is as follows:

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
  });
};