Provide Angular Build Problem Matcher

I have the following task for build:

{
			"label": "build",
			"type": "npm",
			"script": "build",
			"group": {
				"kind": "build",
				"isDefault": true
			},
			"isBackground": true,
			"problemMatcher": {
				"owner": "typescript",
				"source": "ts",
				"applyTo": "closedDocuments",
				"fileLocation": ["relative", "${workspaceRoot}/src"],
				"pattern": "$tsc",
				"background": {
					"activeOnStart": true,
					"beginsPattern": {
						"regexp": "(.*?)"
					},
					"endsPattern": {
						"regexp": "Compiled |Failed to compile."
					}
				}
			}
		},

This used to show errors/warnings under problems. With the new syntax it doesn’t work and I can’t find any information on how this needs to be fixed to parse errors for angular properly.

[kvart714]

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.

[harishrathi]

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