VS Code task problem matcher for Angular CLI build/serve/test commands

Question

I'm trying to configure VS code tasks for standard Angular CLI commands like ng build, ng serve, ng test. The purporse is to get a list of the problems, which I can easily traverse, when I run a CLI command. Currently I run these commands directly from the VS Code terminal, but sometimes it's difficult to navigate to an error because not all source links in the terminal are clickable. The VS Code problem list would be more convinient anyway. I wonder there still isn't a standard matcher, inspite the Angular is so popular, or I miss one?

I tried to create a custom matcher, but it looks harder than I expected. Angular CLI outputs typescript errors as well as html & scss errors, so the task should contain multiple matchers. I cannot use standard $tsc matcher, because the Angular CLI output slightly differs from the TS compiler output - the first error starts with ERROR in and this error isn't recognized by the $tsc matcher.

Here is ng test task for example, but it doesn't work as expected:

1. When I navigate to the first error by pressing F8, the problem list is cleared sometimes. I guess the matcher conflicts with the tsserver that detects error on a file open.
2. Sometimes the matcher misses some errors.

// .vscode/tasks.json

{
    "version": "2.0.0",
    "tasks": [{
        "label": "test",
        "type": "shell",
        "command": "ng test",
        "problemMatcher": [{
            "base": "$tsc",
            "fileLocation": [
                "relative",
                "${workspaceRoot}/src"
            ],
            "pattern":[{
                "kind": "ts",
                "regexp": "^(?:ERROR in )?(.*):(\\d+):(\\d+) - (error|warning|info) TS(.*): (.*)$",
                "file": 1,
                "line": 2,
                "column": 3,
                "severity": 4,
                "code": 5,
                "message": 6
            }]
        }],
        "group": {
            "kind": "test",
            "isDefault": true
        }
    }]
}

Answer 1

I faced the same problem in Angular 11. I found standard $tsc problem matcher in vscode source code here and I also added the word Error to it at the beginning:

"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
    }
  }
],

I also wrote about the problem here