After Upgrading a Workspace Containing Multiple Projects to Angular 11, Karma Refuses to Run

[mylifeandcode]

🐞 bug report

Affected Package

The issue is caused by package @angular/....

Is this a regression?

Yes, the previous version in which this bug was not present was: 10.0

Description

I recently upgraded a multi-project workspace from Angular 10 to 11. I ran into some issues, which were resolved using the solution provided by a member of the Angular CLI team here: angular/angular#39953. However, even though I can now build my app and its projects, when I try to run the tests, I get the following error:

ERROR [karma-server]: Server start failed on port 9876: TypeError: Cannot use 'in' operator to search for 'reporter:coverage' in karma-spec-reporter

I'm not sure why this is occurring, as it does not appear any of the Karma packages were changed, and my Karma configuration files have not changed either. The tests will run if I disable code coverage reports, but I need those. I've also tried removing my codeCoverageExclusions, to no effect.

🔬 Minimal Reproduction

I apologize that I'm unable to share the code behind this, but the scenario is:

• Workspace containing 2 library projects and a main app
• Problematic upgrade as described in When Upgrading from Angular 10 to Angular 11, missing-injectable Schematic Throws Exception angular#39953
• Running ng test or ng test --project=(project) fails with the error mentioned above
• Running ng test with --code-coverage=false, or codeCoverage=false in angular.json works as expected, no error
• I do not have this problem on a smaller, simpler app which just contains the main app in the workspace

🔥 Exception or Error

ERROR [karma-server]: Server start failed on port 9876: TypeError: Cannot use 'in' operator to search for 'reporter:coverage' in karma-spec-reporter

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.3
Node: 12.14.1
OS: win32 x64

Angular: 11.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.3
@angular-devkit/build-angular   0.1100.3
@angular-devkit/core            11.0.3
@angular-devkit/schematics      11.0.3
@angular/cdk                    8.2.3
@angular/http                   7.2.16
@schematics/angular             11.0.3
@schematics/update              0.1100.3
ng-packagr                      11.0.3
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?
A zip file containing my angular.json, and the karma.conf.js for my main app (but this has not changed), is attached.
KarmaNoLikey.zip

[mylifeandcode]

Added zip file containing package.json and package-lock.json files.

package.zip

[kyliau]

In your karma.conf.js

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'), 
      'karma-spec-reporter' // <-- use require
    ],

try to require('karma-spec-reporter').
This is an oversight on our end too, we always expect the plugins array to contain objects only.

angular-cli/packages/angular_devkit/build_angular/src/webpack/plugins/karma.ts

Lines 96 to 97 in d3afdcc

	const hasCoveragePlugin = plugins.some((p: {}) => 'reporter:coverage' in p);
	const hasIstanbulPlugin = plugins.some((p: {}) => 'reporter:coverage-istanbul' in p);

[kyliau]

According to the Karma docs, the plugins array can contain either a string, an object (inlined plugin), or a required NodeModule. Example from the docs:

plugins: [
  // Karma will require() these plugins
  'karma-jasmine',
  'karma-chrome-launcher'

  // inlined plugins
  {'framework:xyz': ['factory', factoryFn]},
  require('./plugin-required-from-config')
]