feat(@angular-devkit/build-angular): support karma version 6.x

package.json

@@ -164,7 +164,7 @@
     "jest-worker": "26.6.2",
     "jquery": "^3.3.1",
     "jsonc-parser": "3.0.0",
-    "karma": "~5.2.0",
+    "karma": "~6.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",

packages/angular_devkit/build_angular/package.json

@@ -81,7 +81,7 @@
   "peerDependencies": {
     "@angular/compiler-cli": "^11.0.0 || ^11.1.0-next",
     "@angular/localize": "^11.0.0 || ^11.1.0-next",
-    "karma": "^5.2.0",
+    "karma": "^5.2.0 || ^6.0.0",
     "ng-packagr": "^11.0.0 || ^11.1.0-next",
     "protractor": "^7.0.0",
     "tslint": "^6.1.0",

packages/angular_devkit/build_angular/src/webpack/plugins/karma.ts

@@ -61,7 +61,7 @@ function addKarmaFiles(files: any[], newFiles: any[], prepend = false) {
   }
 }
 
-const init: any = (config: any, emitter: any, customFileHandlers: any) => {
+const init: any = (config: any, emitter: any) => {
   if (!config.buildWebpack) {
     throw new Error(`The '@angular-devkit/build-angular/plugins/karma' karma plugin is meant to` +
     ` be used from within Angular CLI and will not work correctly outside of it.`
@@ -219,39 +219,13 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
 
   webpackMiddleware = new webpackDevMiddleware(compiler, webpackMiddlewareConfig);
 
-  // Forward requests to webpack server.
-  customFileHandlers.push({
-    urlRegex: new RegExp(`\\/${KARMA_APPLICATION_PATH}\\/.*`),
-    handler: function handler(req: any, res: any) {
-      webpackMiddleware(req, res, function () {
-        // Ensure script and style bundles are served.
-        // They are mentioned in the custom karma context page and we don't want them to 404.
-        const alwaysServe = [
-          `/${KARMA_APPLICATION_PATH}/runtime.js`,
-          `/${KARMA_APPLICATION_PATH}/polyfills.js`,
-          `/${KARMA_APPLICATION_PATH}/polyfills-es5.js`,
-          `/${KARMA_APPLICATION_PATH}/scripts.js`,
-          `/${KARMA_APPLICATION_PATH}/styles.js`,
-          `/${KARMA_APPLICATION_PATH}/vendor.js`,
-        ];
-        if (alwaysServe.indexOf(req.url) != -1) {
-          res.statusCode = 200;
-          res.end();
-        } else {
-          res.statusCode = 404;
-          res.end('Not found');
-        }
-      });
-    }
-  });
-
   emitter.on('exit', (done: any) => {
     webpackMiddleware.close();
     done();
   });
 };
 
-init.$inject = ['config', 'emitter', 'customFileHandlers'];
+init.$inject = ['config', 'emitter'];
 
 // Block requests until the Webpack compilation is done.
 function requestBlocker() {
@@ -327,8 +301,25 @@ sourceMapReporter.$inject = ['baseReporterDecorator', 'config'];
 function fallbackMiddleware() {
   return function (request: http.IncomingMessage, response: http.ServerResponse, next: () => void) {
     if (webpackMiddleware) {
-      request.url = '/' + KARMA_APPLICATION_PATH + request.url;
-      webpackMiddleware(request, response, next);
+      if (request.url && !new RegExp(`\\/${KARMA_APPLICATION_PATH}\\/.*`).test(request.url)) {
+        request.url = '/' + KARMA_APPLICATION_PATH + request.url;
+      }
+      webpackMiddleware(request, response, () => {
+        const alwaysServe = [
+          `/${KARMA_APPLICATION_PATH}/runtime.js`,
+          `/${KARMA_APPLICATION_PATH}/polyfills.js`,
+          `/${KARMA_APPLICATION_PATH}/polyfills-es5.js`,
+          `/${KARMA_APPLICATION_PATH}/scripts.js`,
+          `/${KARMA_APPLICATION_PATH}/styles.js`,
+          `/${KARMA_APPLICATION_PATH}/vendor.js`,
+        ];
+        if (request.url && alwaysServe.includes(request.url)) {
+          response.statusCode = 200;
+          response.end();
+        } else {
+          next();
+        }
+      });
     } else {
       next();
     }

packages/schematics/angular/workspace/files/package.json.template

@@ -30,7 +30,7 @@
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.2.0",
+    "karma": "~6.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",

tests/legacy-cli/e2e/tests/test/test-karma-5.ts

@@ -0,0 +1,11 @@
+import { ng } from '../../utils/process';
+import { installPackage } from '../../utils/packages';
+
+/**
+ * Ensure karma 5.2 continues to function
+ */
+export default async function () {
+  await installPackage('karma@5.2');
+
+  await ng('test', '--watch=false');
+}