fix(@angular-devkit/build-angular): improve debugging experience

With this change we improve the debugging experience with 2 things.

1. Cleaner Karma stack traces in the terminal
Before
```
Chrome 84.0.4147.105 (Mac OS 10.15.5) AppComponent should have as title 'foo' FAILED
        Error: Expected 'foo' to equal 'fox'.
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/projects/foo/src/app/app.component.spec.ts:22:23)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:292:1)
Chrome 84.0.4147.105 (Mac OS 10.15.5): Executed 3 of 3 (1 FAILED) (0 secs / 0.214 secs)
Chrome 84.0.4147.105 (Mac OS 10.15.5) AppComponent should have as title 'foo' FAILED
        Error: Expected 'foo' to equal 'fox'.
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/projects/foo/src/app/app.component.spec.ts:22:23)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zChrome 84.0.4147.105 (Mac OS 10.15.5): Executed 3 of 3 (1 FAILED) (0.225 secs / 0.214 secs)
```

After
```
Chrome 84.0.4147.105 (Mac OS 10.15.5) AppComponent should have as title 'foo' FAILED
        Error: Expected 'foo' to equal 'fox'.
            at <Jasmine>
            at UserContext.<anonymous> (projects/foo/src/app/app.component.spec.ts:22:23)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
Chrome 84.0.4147.105 (Mac OS 10.15.5): Executed 2 of 3 (1 FAILED) (0 secs / 0.225 secs)
Chrome 84.0.4147.105 (Mac OS 10.15.5) AppComponent should have as title 'foo' FAILED
        Error: Expected 'foo' to equal 'fox'.
            at <Jasmine>
            at UserContext.<anonymous> (projects/foo/src/app/app.component.spec.ts:22:23)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
Chrome 84.0.4147.105 (Mac OS 10.15.5): Executed 3 of 3 (1 FAILED) (0.281 secs / 0.237 secs)
```

2. Reduce VS Code configuration
Before
```
{
  "name": "ng test",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:9876/debug.html",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:/*": "${webRoot}/*",
    "/./*": "${webRoot}/*",
    "/src/*": "${webRoot}/*",
    "/*": "*",
    "/./~/*": "${webRoot}/node_modules/*"
  }
},
```

After
```
{
  "name": "ng test",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:9876/debug.html",
  "webRoot": "${workspaceFolder}",
},
```

Author: alan-agius4

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts

@@ -91,7 +91,7 @@ export function getSourceMapDevTool(
     // inline sourcemaps as otherwise paths to sourcemaps will be broken in browser
     // `webpack:///` is needed for Visual Studio breakpoints to work properly as currently
     // there is no way to set the 'webRoot'
-    sourceRoot: inlineSourceMap ? '' : 'webpack:///',
+    sourceRoot: 'webpack:///',
     moduleFilenameTemplate: '[resource-path]',
     append: hiddenSourceMap ? false : undefined,
     exclude: vendorSourceMap ? undefined : /vendor.*\.js/,

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

@@ -70,15 +70,9 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
   successCb = config.buildWebpack.successCb;
   failureCb = config.buildWebpack.failureCb;
 
-  // When using code-coverage, auto-add coverage-istanbul.
-  config.reporters = config.reporters || [];
-  if (options.codeCoverage && config.reporters.indexOf('coverage-istanbul') === -1) {
-    config.reporters.push('coverage-istanbul');
-  }
-
   // Add a reporter that fixes sourcemap urls.
   if (normalizeSourceMaps(options.sourceMap).scripts) {
-    config.reporters.push('@angular-devkit/build-angular--sourcemap-reporter');
+    config.reporters.unshift('@angular-devkit/build-angular--sourcemap-reporter');
 
     // Code taken from https://github.com/tschaub/karma-source-map-support.
     // We can't use it directly because we need to add it conditionally in this file, and karma
@@ -92,8 +86,14 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
     ], true);
   }
 
-  config.reporters.push('@angular-devkit/build-angular--event-reporter');
+  config.reporters.unshift('@angular-devkit/build-angular--event-reporter');
 
+  // When using code-coverage, auto-add coverage-istanbul.
+  config.reporters = config.reporters || [];
+  if (options.codeCoverage && config.reporters.indexOf('coverage-istanbul') === -1) {
+    config.reporters.unshift('coverage-istanbul');
+  }
+    
   // Add webpack config.
   const webpackConfig = config.buildWebpack.webpackConfig;
   const webpackMiddlewareConfig = {
@@ -284,16 +284,13 @@ eventReporter.$inject = ['baseReporterDecorator', 'config'];
 // Strip the server address and webpack scheme (webpack://) from error log.
 const sourceMapReporter: any = function (this: any, baseReporterDecorator: any, config: any) {
   baseReporterDecorator(this);
-
   muteDuplicateReporterLogging(this, config);
 
-  const urlRegexp = /http:\/\/localhost:\d+\/_karma_webpack_\/webpack:\//gi;
+  const urlRegexp = /http:\/\/localhost:\d+\/_karma_webpack_\/(webpack:\/)?/gi;
 
   this.onSpecComplete = function (_browser: any, result: any) {
-    if (!result.success && result.log.length > 0) {
-      result.log.forEach((log: string, idx: number) => {
-        result.log[idx] = log.replace(urlRegexp, '');
-      });
+    if (!result.success) {
+      result.log = result.log.map((l: string) => l.replace(urlRegexp, ''));
     }
   };
 

tests/legacy-cli/e2e/tests/misc/karma-error-paths.ts

@@ -0,0 +1,24 @@
+import { writeMultipleFiles } from '../../utils/fs';
+import { ng } from '../../utils/process';
+import { expectToFail } from '../../utils/utils';
+
+export default async function () {
+  await writeMultipleFiles({
+    'src/app/app.component.spec.ts': `
+        describe('AppComponent', () => {
+          it('failing test', () => {
+            expect('1').toEqual('2');
+          });
+        });
+      `,
+  });
+
+  const { message } = await expectToFail(() => ng('test', '--no-watch'));
+  if (message.includes('_karma_webpack_')) {
+    throw new Error(`Didn't expect logs to server address and webpack scheme.\n${message}`);
+  }
+
+  if (!message.includes('(src/app/app.component.spec.ts:4:25)')) {
+    throw new Error(`Expected logs to contain relative path to (src/app/app.component.spec.ts:4:25)\n${message}`);
+  }
+}