Add ng serve task in Visual Studio Code prevents browser from launching

Question

I'm configuring a .NET + Angular app for debugging in VS Code, but adding the ng serve as a preLaunchTask in the launch.json file is preventing the browser from launching the site https://localhost:4200. How do I set ng serve and also have the browser launches the site https://localhost:4200 automatically?

Answer 1

Angular : Fix Debug Launch Bug in Visual Studio Code

Below is a nice checklist of three settings files you might change to make sure your Angular application in Visual Studio Code launches in a web browser:

1. "launch.json" - Make sure your Debug settings in Visual Studio Code can launch a browser. By default in Angular they do not. So open up /.vscode/launch.json. Add this to the "configurations" list:

"configurations": [
{
"preLaunchTask": "npm: start"
...
}

2. "packages.json" - The above calls code in packages.json. By default the ng start command does NOT launch a browser, and so needs the -o or open command added to the command as so:

"scripts": {
"start": "ng serve -o --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
...
}

• Notice in .NET on Windows they also install an SSL cert so that can prevent your Angular from loading since WebPack in Angular by default is not aware of that feature except through the custom "ng start" command settings above.

3. "angular.json" - Many times you may have Node.js running in the background and hogging port 4200. So the launch will fail. To change the default port to anything but 4200, open up angular.json and add a new one under your "serve" settings:

    "serve": {
      ...
      "options": {
        "port": 4300
      }
   

Now, pressing Debug in VS Code will call the launch.json "preLaunch" task, call "packages" to start serving Angular under your SSL cert and open the browser, then load angular.json to choose your new port!

Answer 2

Here's an implementation that I came up with that worked. The browser is launched quickly, but the background process (ng serve) eventually catches up and loads the application on to the browser.