start task always displayed as "running" in VS Code

[karcherm]

Command

new

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Trying to debug a Angular project as created by ng new in VS Code bocks on "Waiting for preLaunchTask 'start'". This is caused by a bad definition of that task.

Minimal Reproduction

Process

C:\REDACTED>npx -y @angular/cli@21 new vs-demo --minimal --style css --ssr false --ai-config none
...
C:\REDACTED>code vs-demo

1. Press F5. The application is built and a browser is started.
2. Refocus Visual Studio; press Shift-F5 to cancel debugging. The browser window closes
3. Press F5 again.

Note that the options to ng new do not influence this issue. They are just present to speed up the process and avoid user interaction.

Expected result

The browser window re-opens

Actual result

After step 3, the browser window re-opens. Instead, a pop-up window is displayed "(i) Waiting for preLaunchTask 'start'..."

Exception or Error

Your Environment

C:\REDACTED\vs-demo>npx ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI       : 21.0.3
Angular           : 21.0.5
Node.js           : 22.21.1
Package Manager   : npm 10.9.4
Operating System  : win32 x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.0.3            │ ^21.0.3           │
│ @angular/cli              │ 21.0.3            │ ^21.0.3           │
│ @angular/common           │ 21.0.5            │ ^21.0.0           │
│ @angular/compiler         │ 21.0.5            │ ^21.0.0           │
│ @angular/compiler-cli     │ 21.0.5            │ ^21.0.0           │
│ @angular/core             │ 21.0.5            │ ^21.0.0           │
│ @angular/forms            │ 21.0.5            │ ^21.0.0           │
│ @angular/platform-browser │ 21.0.5            │ ^21.0.0           │
│ @angular/router           │ 21.0.5            │ ^21.0.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.0.15            │ ^4.0.8            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else relevant?

The issue actually already starts manifesting at step 1. While the application is running hit, the "npm: start" task is in the "running" state, although the compilation is already finished:

Suggested Fix

The core issue is a bad beginsPattern in .vscode/start.json:

        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "bundle generation complete"
          }
        }

While the endsPattern is correct and allows VS Code to detect when the initial bundle generation is complete (and thus start the debugging in the first iteration), the beginsPattern matches basically anything and causes the task to transistion into the "running" state immediately after detecting the endsPattern. In this case, the beginsPattern likely already matches on the full stop following "bunde generation complete":

Initial chunk files | Names         | Raw size
main.js             | main          |  2.45 kB | 
styles.css          | styles        | 95 bytes | 

                    | Initial total |  2.55 kB

Application bundle generation complete. [6.448 seconds] - 2025-12-12T09:53:41.614Z

This causes Visual Studio to assume that another background compilation is in progress. A sensible beginsPattern is "Changes detected".

To validate whether the beginsPattern actually hits, I monkey-patched node_modules\@angular\build\src\builders\application\build-action.js near line 150 to add a delay that makes the "task running" state visible in VS Code:

            // Clear removed files from current watch files
            changes.removed.forEach((removedPath) => currentWatchFiles.delete(removedPath));
            const rebuildState = result.createRebuildState(changes);
            result = await withProgress('Changes detected. Rebuilding...', () => action(rebuildState));
            await (new Promise(r => setTimeout(r, 1000)));  // INSERTED DELAY
            // Log all diagnostic (error/warning/logs) messages
            await (0, utils_1.logMessages)(logger, result, colors, jsonLogs);

Side issue

The endsPattern only matched successful compilation, keeping the job in running state if the compilation failed. This is likely also not intended. So I suggest an endsPattern of "bundle generation (complete|failed)".

The improved tasks.json now looks like:

{
  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "Changes detected"
          },
          "endsPattern": {
            "regexp": "bundle generation (complete|failed)"
          }
        }
      }
    }
  ]
}