Visual studio code (vscode) - Angular - Cannot open file from problems (clicking on problem link redirects to wrong path)

Coding Context:

Angular : v15 (and same error on 13)
NodeJS : v18.10 (and tried with v16.18 also)
NPM : v8.10.0
VsCode : 1.73.1

Problem:

When there is a syntax error in my Angular/TypeScript code, VisualCode will show my error in the 'Problem' tab, but if I click the error, there is an ERROR.

The error is : "The editor could not be opened because the file was not found".

Investigation (in case it helps) : When I look closer, the link that visual Studio tries to open is WRONG :

Instead of opening the file C:\Users\simon\sandbox\learnRxJS2\src\app\app.component.ts

It is trying to open : C:\Users\simon\sandbox\learnRxJS2\Error: src\app\app.component.ts

there is an 'Error: ' inserted between the "workspace" and the "relative path".

Details of the 3 scenarios:

A - Editor Opened, before initial RUN Before opening the file containing my error, NO ERROR (No 'problems') shown.

When I manually open the editor [clicking on the file in File Explorer] :

If i CLOSE the Editor windows, the error will DISAPPEAR from the Problem Tab. That's ok, and maybe that's a clue..

B - Editor Closed, After trying to RUN the project If i CLOSE the app.component.ts file from the editor, No more 'Problems' reported in my Code.

Then I simply RUN Angular (f5) => it will fails and show my error in the PROBLEM tabs.

That's where i CANNOT click in the link :

C - Editor opened AND after trying to RUN the project

Finally, If i OPEN my error file by Hand (with File explorer), the error will be shown 2 times!! If I click on the 'new' problem, the editor will FIND the line of code. If I click on the Other one, the error 'Cnanot fin file' will show up again!

Here is a Guy facing the SAME problem, but with VSCODE + SalesForce : https://salesforce.stackexchange.com/questions/377152/problems-are-returning-errors-linking-to-incorrect-file-locations-giving-the-e

The standard predefined $tsc pattern can't match ng build output command (they changed that output at some point).

It looks like:

{
  "name": "tsc",
  "regexp": "^([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+TS(\\d+)\\s*:\\s*(.*)$",
  "file": 1,
  "line": 2,
  "column": 3,
  "severity": 4,
  "code": 5,
  "message": 6
}

As you can see, it's just a regexp. That's why it takes Error: src/app/app.component.ts as a file path.

To workaround it, you could optionally prefix the word Error to it.

So, go to .vscode/tasks.json and replace all "pattern": "$tsc", places with:

"pattern": {
  "regexp": "^(Error: )?([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+TS(\\d+)\\s*:\\s*(.*)$",
  "file": 2,
  "line": 3,
  "column": 4,
  "severity": 5,
  "code": 6,
  "message": 7
},

There is similar reported issue in github https://github.com/angular/vscode-ng-language-service/issues/625#issuecomment-801327945

Recommended topics

Hot tags