"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
  });
};

for that url in exception it will take you to browser only, if it was some compilation issue, it will take you to file. depends on location its showing in error. — Aakash Garg, Jun 03 '20 at 05:39
@Aakash Garg: I'm sure, it worked in the past. I was able to jump to the related line in the source file when an error occurred in the test. — uminder, Jun 04 '20 at 16:27
Does that help? https://stackoverflow.com/questions/61819887/webpack-directory-appended-at-error-after-migrating-to-angular9 — David, Jun 06 '20 at 06:20
@David: Thanks for your comment! I followed the instructions from https://stackoverflow.com/q/61819887/2358409 as you suggested and now, it works again. I however don't exactly understand why this solved my problem. Can you maybe post an awardable answer with some further explanations? — uminder, Jun 06 '20 at 08:14

score 3 · Accepted Answer · answered Jun 06 '20 at 16:39

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

score 1 · Answer 2 · answered Mar 20 '21 at 13:11

1

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

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

answered Mar 20 '21 at 13:11

aCiD

1,273
1
18
28

score 0 · Answer 3 · edited Jun 02 '20 at 19:15

0

In my case, I was getting crazy, it stopped working from one day to another. Researching, I realized that VS had applied an automatic update, and disabled some Angular extensions, I do not know why? (In my case, it happened developing an angular 8 application).

So the working solution for me was going to extensions, filter by "@disabled" and enable the angular -or whatever in your case- extension

edited Jun 02 '20 at 19:15

schneida

729
3
11
37

answered Jun 02 '20 at 13:43

Javier Ruiz

1

Unfortunately your proposal doesn't work for me, I found no `disabled` extension in my VSCode. – uminder Jun 03 '20 at 03:27

score 0 · Answer 4 · answered Jun 05 '20 at 08:43

Open VsCode, press F1, Search open user settings, click on open user settings. a window will come. search terminal on left and try turning off allowchords to false.

If instead of this window you see a json. Put :-

"terminal.integrated.allowChords": false

score 0 · Answer 5 · answered Jun 03 '22 at 19:38

0

Add this to your tsconfig.json:

"angularCompilerOptions": {
    "strictTemplates": true
 }

Worked for me, hope this helps!

answered Jun 03 '22 at 19:38

tkhal

1
1

J.A · Answer 6 · 2022-11-11T10:53:24.567

0

This is unreal, found the solution: If the terminal is small, it will open in editor, if big in browser, so try just enlarging the terminal if you keep it on the right or left side like I do.... Bigger no problem

Smaller problem

edited Nov 11 '22 at 10:53

answered Nov 11 '22 at 10:52

J.A

1
1

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

6 Answers6