title: Angular 11 Unit Test Code Coverage is Now Breaking
body: <p>Prior to upgrading to Angular 11, I ran my unit tests with code coverage via the following command:</p>
  <pre><code>ng test --project my-app --code-coverage true
  </code></pre>
  <p>When I upgraded my project to Angular 11, I was still able to do my code coverage tests, but I started getting a message saying &quot;'karma-coverage-istanbul-reporter' usage has been deprecated since version 11&quot;.  It asked me to install karma-coverage and update karma.conf.js.  So I did what it asked.  I installed karma-coverage and karma via this command:</p>
  <pre><code>npm install karma karma-coverage --save-dev
  </code></pre>
  <p>As a result, I see in my package.json, under devDependencies, the entries for karma:</p>
  <pre class="lang-js prettyprint-override"><code>&quot;karma&quot;: &quot;^5.2.3&quot;,&lt;br&gt;
  &quot;karma-coverage&quot;: &quot;^2.0.3&quot;
  </code></pre>
  <p>I updated my karma.conf.js file.  The following is what exists, everything was as it was originally except for my comments:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = function (config) {
    config.set({
      basePath: '',
      frameworks: ['jasmine', '@angular-devkit/build-angular'],
      plugins: [
        require('karma-jasmine'),
        require('karma-chrome-launcher'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage'), // NEWLY ADDED
        // ORIGINALLY HERE NOW REMOVED require('karma-coverage-istanbul-reporter'),
        require('@angular-devkit/build-angular/plugins/karma')
      ],
      client: {
        clearContext: false // leave Jasmine Spec Runner output visible in browser
      },
      reporters: ['progress', 'kjhtml', 'coverage'],
      // coverageIstanbulReporter NO LONGER HERE
      //coverageIstanbulReporter: {
      //  dir: require('path').join(__dirname, '../../coverage/my-app'),
      //  reports: ['html', 'lcovonly', 'text-summary'],
      //  fixWebpackSourcePaths: true
      //},
      // coverReporter NEWLY ADDED
      coverageReporter: {
        dir: 'build/reports/coverage',
        reporters: [
          { type: 'html', subdir: 'report-html' },
          { type: 'lcov', subdir: 'report-lcov' }
        ]
      },
      // THE FOLLOWING REMAINED AS IS
      port: 9876,
      colors: true,
      logLevel: config.LOG_INFO,
      autoWatch: true,
      browsers: ['Chrome'],
      singleRun: false,
      restartOnFileChange: true
    });
  };
  </code></pre>
  <p>Having made this update, two things are happening and I can't figure out why.</p>
  <ol>
  <li><p>When I run my normal code coverage command, I get the following error: &quot;Server start failed on port 9876: Error: karma-coverage must be installed in order to run code coverage.&quot;  I did install it, as my package.json indicates, but for some reason my project doesn't recognize this.  In addition, if I add back the karma-coverage-istanbul-reporter require method to my conf.js file, coverage works fine, but I still get that deprecation message.  Can anyone explain to me why I may be getting this error?</p>
  </li>
  <li><p>When I run my tests without coverage, I now get multiple warnings that I never got before, like: &quot;Unable to determine file type from the file extension, defaulting to js.
  To silence the warning specify a valid type for C:/Angular/my-project/projects/my-app/src/app/app.component.spec.ts in the configuration file.&quot;  What would I need to do to resolve this?</p>
  </li>
  </ol>
  <p><strong>EDIT:</strong> I found the answer.  Inside the coverageReporter object, you need to add the fixWebpackSourcePaths property to true:</p>
  <pre class="lang-js prettyprint-override"><code>coverageReporter: {
    dir: 'build/reports/coverage',
    reporters: [
      { type: 'html', subdir: 'report-html' },
      { type: 'lcov', subdir: 'report-lcov' }
    ],
    fixWebpackSourcePaths: true
  },
  </code></pre>