How to start both Angular app and WebApi service from VSCode on F5 or Ctrl+F5 - visual-studio-code

Question

I have top-level folder Homepage with the following structure:
--Homepage
----Client <- Angular app, created with `ng new` command
----Server <- .NET Core WebApi, created with `dotnet new webapi` command
I open VSCode at Homepage level:
I have these extensions installed:
Question
If I want to use single VSCode environment to work on both projects, Client and Server, is it possible to bind F5 (or Ctrl+F5) to start both projects together?
Client app I start using ng serve (it will run on http port 4200)
Server app I start using dotnet run (it will run on https port 5001)
I have just one common .vscode folder on Homepage (root level):
By default, when first created, the content of launch.json was this:
{
// Use IntelliSense to find out which attributes exist for C# debugging
// Use hover for the description of the existing attributes
// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Launch (web)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
// If you have changed target frameworks, make sure to update the program path.
"program": "${workspaceFolder}/Server/bin/Debug/netcoreapp2.1/Server.dll",
"args": [],
"cwd": "${workspaceFolder}/Server",
"stopAtEntry": false,
"internalConsoleOptions": "openOnSessionStart",
"launchBrowser": {
"enabled": true,
"args": "${auto-detect-url}",
"windows": {
"command": "cmd.exe",
"args": "/C start ${auto-detect-url}"
},
"osx": {
"command": "open"
},
"linux": {
"command": "xdg-open"
}
},
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceFolder}/Views"
}
},
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
}
,]
}
So, when I press F5 it builds and start the Server app, the page opens at https://localhost:5001, from there I can navigate to https://localhost:5001/api/values and see WebApi works.
But the Client app doesn't start at all.
So, I thought if I add Debugger for Chrome extension's settings to launch.json, it should work, so I clicked on Add Configuration and added corresponding section:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
I changed port from 8080 to 4200, since ng serve hosts on port 4200
But it does not start the Client app.
Please advice. Thanks

Answer 1

I have similar (node.js for API) and spent quite some times couldn't resolved, for example use && or &. Result is either API up or Angular up, never the both.
Anyway I finally realized have both Api and UI in the same folder/project/solution is not practical. An API is not specific to an UI, it's a universal DLL/service, should be siting somewhere by itself. So I separated them into two diff folders and have 2 VSC instances to run them:
start the API in debug mode
in 2nd VSC, run ng serve and let it take time to build
when ng says "Compiled successfully" go to launch.json to start the debug entry associated with Chrome
they work perfectly.