"Ctrl+click to follow link" in VSCode terminal doesn't jump to source file but opens new browser tab
I'm working on an Angular 8 project using Visual Studio Code (version 1.40.1) and running Karma/Jasmine tests from its terminal via commands . When a test fails, I'm always able to jump to the relevant source file via the terminal link embedded in the stack trace . For a few days this no longer works, instead a new Chrome browser tab is opened.ng test
Ctrl + click
I think the problem might be related to any recently updated npm
packages. So I created a brand new Angular 8 project ( ng new
), made minor changes to app.component.spec.ts
it and started ng test
. Unfortunately, the same problem occurs here. Completely uninstalling and reinstalling VSCode didn't help either.
Any ideas on how to get the original functionality (jump to source)?
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
});
};
You ctrl+click doesn't navigate directly to the file, because the error stack is displayed, http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts
not src/app/app.component.spec.ts
.
You can use the option suggested in this answer , which consists of specifying a function in configformatError
karma.conf.js
formatError: (msg) =>
msg.replace(/http:\/\/localhost:9876\/_karma_webpack_\//g, '')
This will cause karma to use the above method http://localhost:9876/_karma_webpack_
when formatting the error stack ( completely removed from the stack trace ).
Now, why this is happening, I'm not sure. I checked out an old angular 7 project which had an old dependency of karma/jasmine/...and it worked as before (ie the error stack pointed directly to the file in src
).
Then I upgraded karma, jasmine, karma jasmine... to the latest version and it still works.
I also started having the same problem when I upgraded to angular 8. So there must be a change somewhere, but I don't know where