title: Get Cobertura coverage from an angular5 app in typescript
body: <p>I am currently working on a project where we want to have some code coverage for our unit tests.
  The tests are running fine but I have some trouble getting the right coverage.</p>
  
  <p>Our CiCd runs in VSTS and it requests an export of the code coverage in Cobertura or JaCoCo in order to publish the result.</p>
  
  <p>So our app is an Angular 5 application written fully in TypeScript with the specs files embedded with each component / module / ...</p>
  
  <p>Our tests are running with karma, jasmine, with chrome and my karma.conf.js looks like this right now:</p>
  
  <pre><code>module.exports = function (config) {
    config.set({
      basePath: '',
      frameworks: ['jasmine', '@angular/cli'],
      plugins: [
        require('karma-jasmine'),
        require('karma-chrome-launcher'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage-istanbul-reporter'),
        require('@angular/cli/plugins/karma'),
        require('karma-junit-reporter'),
        require('karma-remap-coverage'),
        require('karma-coverage'),
      ],
      client:{
        clearContext: false // leave Jasmine Spec Runner output visible in browser
      },
      files: [
        { pattern: 'src/**/*.ts' }
      ],
      preprocessors: {
        './src/**/*.ts': ['coverage']
      },
      coverageIstanbulReporter: {
        reports: [ 'cobertura' ],
        fixWebpackSourcePaths: true
      },
      coverageReporter: {
        type: 'in-memory'
      },
      remapOptions: {
        basePath: './src'
      },
      remapIstanbulReporter: {
        reports: {
          html: 'coverage',
          cobertura: './coverage/cobertura.xml',
        }
      },
      remapCoverageReporter: {
        'text-summary': null, // to show summary in console
        html: './coverage/html',
        cobertura: './coverage/cobertura.xml'
      },
      angularCli: {
        config: './angular-cli.json',
        environment: 'dev',
        codeCoverage: true
      },
      reporters: ['progress', 'junit', 'coverage', 'remap-coverage'],
      port: 9876,
      colors: true,
      logLevel: config.LOG_INFO,
      autoWatch: true,
      browsers: ['Chrome'],
      singleRun: false,
      sourceMaps: true
    });
  };
  </code></pre>
  
  <p>There is a configuration for junit as VSTS can export the result in junit too but I don't think it's the cause of my problem right now.
  Also the conf file might have some configurations that does nothing but are there because of all the tests I've done yesterday to get this to work.</p>
  
  <p>My concerns are that the code coverage is done on nothing as the console output it at the end of the run:</p>
  
  <pre><code>=============================== Coverage summary ===============================
  Statements   : 100% ( 0/0 )
  Branches     : 100% ( 0/0 )
  Functions    : 100% ( 0/0 )
  Lines        : 100% ( 0/0 )
  ================================================================================
  </code></pre>
  
  <p>But I'm sure my tests are fine :
      Chrome 66.0.3359 (Mac OS X 10.12.6): Executed 264 of 291 (skipped 27) SUCCESS (9.286 secs / 0 secs)</p>
  
  <p>Also at the beginning of the run I have a lot of errors showing :</p>
  
  <pre><code>04 05 2018 10:51:51.473:ERROR [preprocessor.coverage]: Line 1: Unexpected token
    at /Users/user/Documents/work/project/src/app/settings/settings.component.spec.ts
  Failed to parse file: /Users/user/Documents/work/project/src/app/settings/settings.component.ts
  </code></pre>
  
  <p>Maybe it can come from here? But i don't know what these errors are and why I am getting them.</p>
  
  <p>Overall, I found it very difficult to find a great tutorial on this on the web, having lots of different libs calling each other (karma / coverage / istanbul / karma-typescript / ....) and their doc being quite light.</p>
  
  <p>What am I doing wrong ? How can I fix this ?</p>