4

I have an Angular project and currently debugging inside vs code via debugger for chrome. My launch.json uses "preLaunchTask": "serve" where serve is defined in tasks.json as "ng serve" so that I have "ng serve" executed first and sever is ready before browser is opened by debugger to hit http://localhost:4200.

Everything works fine. However, when I stop debugging, I still have "ng serve" task running as expected and I have to terminate that task manually every time.

I tried to use "postDebugTask" in launch.json but not much luck as vs code will complain about starting a new task (postDebug) until another running task (preLaunch) is not terminated. Could anyone please help?

1

4 Answers 4

5

After looking into this for a while, there doesn't seem to be any clean way to kill a task in VS Code that was kicked off as part of preBuildTask. It's a build task, and the debug task itself appears to be separate from that. Since the debug PID itself is targeted at Chrome, there's a weird separation between the two.

So, let's brute force it.

First, we need to get our initial ng serve running as a child process so another task won't complain about the first task hogging the terminal. This task worked for me:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "serve",
            "command": "ng serve",
            "isBackground": true,
            "type": "shell",
            "presentation": {
                "reveal": "always"
            },
            "problemMatcher": {
                "fileLocation": "relative",
                "background": {
                }
            }
        }
    ]
}

Note the isBackground property. This will spawn any future tasks in their own shell. presentation is reveal: always so we can see the CLI output. We can get fancy and capture CLI problems with the debug process in problemMatcher, but let's forget it for now.

Now, let's make a kill task. Instead of working through VS Code to find the initial spawned task, let's do it through our OS. Now this is highly dependent on which OS and which shell you use (shells can be configured per task via the shell property).

We need to find the PID of the ng serve shell and send it off to the big computer in the sky. We can look for the PID hogging the localhost port being served against, which I'll assume is 4200 by default.

Example CMD command:

for /F "tokens=1,2,3,4,5" %A in ('"netstat -a -n -o | find 4200""') DO ('"Taskill /PID %E /F"')

Example bash/terminal command (simpler, as usual):

[sudo] lsof -ti:4200 | xargs kill

Then just make a kill task with the command and add it to postDebugTask:

    {
        "label": "kill",
        "command": "lsof -ti:4200 | xargs kill",
        "type": "shell",
    }

If you run into access rights, you can probably fix it by running VS Code as admin or by providing a path to an .exe where you already have admin rights. Again, depends on your shell and OS.

0
4

As pointed out in this S.O. answer, the ability to run workbench commands from tasks was recently added to VSCode. It appears as though the best solution to this problem is to run the following task "postDebugTask": "end serve"

{
   "label": "end serve",
   "type": "process",
   "command":[
      "${command:workbench.action.tasks.terminate}"
   ],
},

This will prompt you to select the task you want to terminate from a drop down list. Unfortunately, I haven't been able to find a way to tell VSCode what task you want to terminate via an argument.

As pointed out in the linked answer, if you only have one task to choose from, you can automatically select that task with

{
   "label": "end serve",
   "type": "process",
   "command":[
      "${command:workbench.action.tasks.terminate}",
      "${command:workbench.action.acceptSelectedQuickOpenItem}",
   ],
},

Thus eliminating the drop down menu.

3

This should work out, tested on Windows. Comments in code.

File: launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            //I use MS Edge to debug because is the only browser I dont use
            "type": "pwa-msedge",

            //For launch to work alongside "userDataDir", the browser has to be closed (no instances running)
            "request": "launch",

            //Before start the debugger, start the application
            "preLaunchTask": "npm: start",

            "name": "Debug Application X",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",

            //This key open the browser with default user profile loaded (in particular, extensions)
            //I use this because I need a modify HTTP header extension
            //If you dont need any extension, just remove this line and the restriction of
            //no instances running does not apply anymore
            "userDataDir": false,

            //Task to kill the application
            "postDebugTask": "end all",
        }
    ]
}

File: tasks.json

{
    "version": "2.0.0",
    "tasks": [
        //Task to start application
        {
            "type": "npm",
            "script": "start",
            "isBackground": true,
            "problemMatcher": {
                "owner": "typescript",
                "pattern": "$tsc",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": {
                        "regexp": "(.*?)"
                    },
                    "endsPattern": {
                        "regexp": "bundle generation complete"
                    }
                }
            }
        },
        //Task to end application
        //Be aware that this task will end ALL the tasks running in VS Code
        {
            "label": "end all",
            "command": "echo ${input:terminate}",
            "type": "shell",
            "problemMatcher": []
        }
    ],
    "inputs": [
        //Input to pass the argument terminateAll to workbench.terminate
        {
            "id": "terminate",
            "type": "command",
            "command": "workbench.action.tasks.terminate",
            "args": "terminateAll"
        }
    ]
}
2

This is an old issue, but still lives on in mid 2022 ... for a quick and dirty way to terminate the ng serve, you can click in code's terminal tab and hit <ctrl-c>. This is not what the OP asked for, but for others seeking a quick workaround, this may help and is faster than ps / kill.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.