vscode-ng-language-service: Provide Angular Build Problem Matcher

Hello everybody,

I’ve updated Angular to 11 version and have faced with the issue.

The standard typescript problem matcher of VS Code ($tsc) cannot parse ng build errors anymore.

I have reviewed VS Code source code and have found a regular expression which parses errors from tsc (link).

The following regex is used: /^([^\s].*)[\(:](\d+)[,:](\d+)(?:\):\s+|\s+-\s+)(error|warning|info)\s+TS(\d+)\s*:\s*(.*)$/

But Angular displays errors in the following formats now: Error: src/app/app.component.ts:9:18 - error TS1005: ';' expected.

and problem matcher takes the row ‘Error: src/app/app.component.ts’ as a file path with the extra ‘Error: ’ word at the beginning. That causes incorrect file paths building and VS Code failing during attempt to open the file with the error:

I don’t know whom to reach with this issue and this branch is the single one which I’ve found in all angular/angular-cli/vscode repositories, that’s why I’ve written it here.

Moreover, problem matcher $msCompile source code you mentioned is located next to it. But I don’t understand why you even need $msCompile. I use the following matcher as a temporary solution in my tasks.json:

"problemMatcher": [
  {
    "base": "$tsc",
    "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
    }
  }
],

But it works half the time because the error messages are displayed in different formats.

I was getting some error when using @kvart714, so used https://regex101.com/ , pasted all errors and came up with below. This exactly matches with the default $tsc matcher except the beginning Error:

                "pattern": {
                    "regexp": "^Error: ([^\\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
                },

current-matcher: https://github.com/microsoft/vscode/blob/149a8b71c534df0554c17b05cf1a925e9139c47f/extensions/typescript-language-features/package.json#L1105

+errors are found only in open files, so the absence of errors does not at all guarantee that the project can be built with a properly configured matcher and build task, we see all the errors that occur during the build process

Here’s why I’m right:

The problem matchers don’t work properly in background mode because there is no beginning and ending expressions that you can provide because they once again changed – and no one updated them.

The recipes supplied by vs code for angular don’t work.

Given that VS code is the ##1 most used development tool for angular, this should just work. It doesn’t. It’s a mess as it stands right now (i.e. variations of this issue are all over stack overflow and here every time the angular team changes their output). I should be able to do what I do with dart with a new project: click the play button and it does the rest automatically.

Why can I do this? Because the Dart Language Server also provides the recipes for the tasks and the problem matchers correctly and they update them any time there is a change and the process is automatically done for you and it’s always right.

Angular doesn’t provide any of this and it makes developer’s lives hard for no reason. We don’t get to code because we’re messing with VS code to get to coding. This is exactly why we have the angular CLI and don’t have to manually generate our own webpack.js file anymore: Developers were sick and tired of having to orchestrate stuff just to get it to work and it constantly broke. This is no different and needs to be fixed for the same reason and the Dart team within Google agrees with me. (And Dart’s primary tool is Android studio so it isn’t even like VS code is the defacto standard yet they still do it.)

All I’m asking is that the Angular Language Server plugin provide the same baseline support that the dart/flutter language server plugin does with the same quality. If you fire up a dart project in vs code you’ll see what you get with tasks and they’re nothing like the archane mess that Angular forces on you.

There is no magic. Since version 9 or 10, don’t remember exactly which one exactly, they started to output colored error messages to tty. It simple means that they are using ANSI colors escape sequences. That’s why none of those regular expressions above will be not working. Because they do not take into account strings like this

Error: src/app/widgets/base-widget.component.ts:45:27 - error TS2552: Cannot find name 'itemqq'. Did you mean 'item'?

Haven’t tries this in Linux yet, but here is the solution that works for me in Windows

{
    "version": "2.0.0",
    "options": {
      "env": {
        "FORCE_COLOR": "0"
      }
    },
    "tasks": [
      {
        "type": "npm",
        "script": "build:dev:watch",
        "group": {
          "kind": "build",
          "isDefault": true
        },
        "problemMatcher": [
          {
            "base": "$tsc",
            "pattern": {
              "regexp": "^Error: ([^\\s].*?):(\\d+):(\\d+).*(error|warning|info)\\s+TS(\\d+)\\s*:\\s*(.*)$",
              "file": 1,
              "line": 2,
              "column": 3,
              "severity": 4,
              "code": 5,
              "message": 6
            }
          }
        ],
        "label": "npm: build:dev:watch",
        "detail": "ng build --watch"
      }
    ]
}

Note the environment variable name - I found it in Angular CLI repo angular-cli-main/packages/angular/cli/src/utilities/color.ts

@kyliau In most cases it’s the language service that provides the pattern matching tools. Since Angular now has a non-standard error reporting from the tsc tools, I’d suggest that these are needed in the language services so that we can link up problems again.