VSCode tasks.json for ng build --watch

Question

I didn't find a working Visual Studio Code tasks.json definition for angular cli "ng build --watch" commapnd. Can someone help with a well tested definition ?

to reproduce, try to have an error and then, fix it. the error will remain in the "problems tab"

a task definition for "ng lint" is also needed.

this is what i have and it's not working well.

{
"version": "2.0.0",
"tasks": [
    {
        "label": "ngBuildWatch",
        "type": "shell",
        "command": "ng",
        "args": [
            "build",
            "--watch"
        ],
        "isBackground": true,
        "problemMatcher": {
            "owner": "angular",
            "severity": "error",
            "fileLocation": "relative",
            "background": {
                "activeOnStart": true,
                "beginsPattern": {
                    "regexp": "^\\s*(?:message TS6032:|\\d{1,2}:\\d{1,2}:\\d{1,2} (?:AM|PM) -) File change detected\\. Starting incremental compilation\\.\\.\\./"
                },
                "endsPattern": "/^\\s*(?:message TS6042:|\\d{1,2}:\\d{1,2}:\\d{1,2} (?:AM|PM) -) Compilation complete\\. Watching for file changes\\./ "
            },
            "pattern": [
                {
                    "regexp": "ERROR in (.*)\\(",
                    "file": 1
                },
                {
                    "regexp": "\\((\\d+),(\\d+)\\):(.*)",
                    "line": 1,
                    "column": 2,
                    "message": 3
                }
            ]
        }
    }
]

}

Answer 1

Here is my tasks.json definition for ng build (some modification of Typescript extension definition), I guess you can adapt it for ng build --watch also:

{
    "label": "show all TS errors: ng build",
    "type": "npm",
    "script": "build",
    "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "pattern": {
            "regexp": "^ERROR in ([^\\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
        },
        "fileLocation": "relative"
    }
}

And for ng lint:

{
    "label": "show all TSLint errors: ng lint",
    "type": "npm",
    "script": "lint",
    "problemMatcher": "$tslint5"
},

package.json:

"scripts": {
    "ng": "ng",
    "build": "ng build",
    "lint": "ng lint",
},

$tslint5 problemMatcher is included in extensions TypeScript TSLint Plugin and TSLint. I recommend first one as it is a reworked version of second extension with support of language service plugin. You can find installation instructions on their pages.

Answer 2

Use this for watch:

{
          "label": "ng serve",
          "type": "npm",
          "script": "start",
          "group": "build",
          "isBackground": true,
          "presentation": {
            "focus": true,
            "panel": "dedicated"
          },
          "problemMatcher": {
            "owner": "typescript",
            "source": "ts",
            "applyTo": "allDocuments",
            "fileLocation": [
              "relative",
              "${cwd}"
            ],
            "pattern":   {
              "regexp": "^\\s*(?:ERROR in )?([^\\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
            },
            "background": {
              "activeOnStart": true,
              "beginsPattern": {
                "regexp": "Compiling\\.\\.\\.$"
              },
              "endsPattern": {
                "regexp": "Compiled successfully\\.$|Failed to compile"
              }
            }
          }
      }