"Ctrl + click to follow link" in VSCode terminal does not jump to source file but opens new browser tab

Question

I'm using Visual Studio Code (version 1.40.1) to work on my Angular 8 project and run Karma/Jasmine tests from its terminal through the command ng test. When a test failed, I was always able to jump to the related source file through Ctrl + click on a terminal link, embedded in a stack-trace. Since a few days, this doesn't work anymore but a new Chrome browser tab is opened instead.

I thought the problem could be related to any recent updated npm package. Therefore I created a brand-new Angular 8 project (ng new), made a small change in app.component.spec.ts and started ng test. Unfortunately the same problem appears there as well. Completely uninstalling and reinstalling VSCode didn't help either.

Any idea on how I can get the original functionality (jump to source) back?

package.json

{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.13",
    "@angular/common": "~8.2.13",
    "@angular/compiler": "~8.2.13",
    "@angular/core": "~8.2.13",
    "@angular/forms": "~8.2.13",
    "@angular/platform-browser": "~8.2.13",
    "@angular/platform-browser-dynamic": "~8.2.13",
    "@angular/router": "~8.2.13",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.18",
    "@angular/cli": "~8.3.18",
    "@angular/compiler-cli": "~8.2.13",
    "@angular/language-service": "~8.2.13",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

karma.config.js

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-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/app'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

Answer 1

You Ctrl + click does not navigate to the file directly because the error stack displays http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts instead of src/app/app.component.spec.ts.

You can use the option suggested in this answer, which consists in specifying a formatError function in karma.conf.js config

 formatError: (msg) =>
  msg.replace(/http:\/\/localhost:9876\/_karma_webpack_\//g, '')

This will cause karma to use the method above (which completely removes http://localhost:9876/_karma_webpack_ from the stack trace) when formatting the error stack.

Now, as to why this happens, I'm not sure. I check an old angular 7 project, with old dependencies for karma /jasmine/... it worked as before (i.e. the error stack refered directly to file in src).

I then upgraded karma, jasmine, karma-jasmine,... to the latest version and it still worked.

I started having the same problem when I upgraded to angular 8. So something must have changed somewhere, but I don't know where

Answer 2

For my case, had to add angularCompilerOptions.strictTemplates to tsconfig.json

{
  "compilerOptions": {
    ...
  },
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}