@angular/cli - eject command - testing does not output any coverage reports

[jgodi]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions

@angular/cli: 1.0.0-rc.4 (e)
node: 6.10.0
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 2.4.10

Repro steps.

ng new testerino
cd testerino
ng eject -aot -prod
npm test

The log given by the failure.

No failure, but there is no coverage numbers outputted.

Desired functionality.

A coverage folder is created and coverage reports populated.

Mention any other details that might be useful.

The ejected reporters in the karma.conf.js are:

reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],

I even updated these to reporters: ['progress', 'coverage-istanbul', 'kjhtml'] and still have the same results (as per #5514).

Has anyone else ran across this?

[jgodi]

SOLVED! Here is what you have to do when you eject the config and get want to get code-coverage. Apologies if this is documented somewhere. Let me know if its not and I can document it.

In your karma.conf.js you have to add:

 angularCli: {
   environment: 'dev',
   codeCoverage: true
 }

The codeCoverage: true is what tells the @angular/cli/plugins/karma to use the post loaders for instanbul. Now, I am able to get proper coverage using the fix from #5514 as well.

[dreamerkumar]

Thanks for your input @jgodi Setting up the 'codeCoverage' property actually does make the reporter work in a project where ng eject has been applied.

But it only works if we still use the angular-cli in the list of karma frameworks.

I need to use a different framework with the ejected webpack config. Essentially removing all relationships with angular-cli from the karma config. But still using the same webpack.

There is definitely some config that I am missing in the webpack to make the reporter work. Anyone has some clues?

[dreamerkumar]

Found out the extra configuration that was missing by going to the angular-cli source code: https://github.com/angular/angular-cli/blob/1cd0a0811df2b7a45cbffb413dd56e3ac21a96e4/packages/%40angular/cli/models/webpack-configs/test.ts

Needed to add this configuration in the webpack to make code-coverage to work with zero dependency on angular-cli

      {
        test: /\.(js|ts)$/, 
        loader: 'istanbul-instrumenter-loader',
        enforce: 'post',
        query: {
          esModules: true
        },
        exclude: [
          /\.(e2e|spec)\.ts$/,
          /node_modules/
        ]
      }

[hikumealan]

@dreamerkumar any insight into where you added this in the webpack.config.js?

[gnomeontherun]

@hikumealan it would be in the module.rules array.

module.rules[
  // other rules probably already exist
  {
      test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader',
      enforce: 'post',
      exclude: [
        /\.(e2e|spec)\.ts$/,
        /node_modules/
      ]
    }
]```

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}