如何在F5或Ctrl + F5上从VSCode启动Angular app和Web Api服务

Question

我有顶级文件夹主页，具有以下结构：

--Homepage
----Client <- Angular app, created with `ng new` command
----Server <- .NET Core WebApi, created with `dotnet new webapi` command

我在主页级别打开VSCode：

我安装了这些扩展程序：

题

如果我想使用单个VSCode环境来处理客户端和服务器这两个项目，是否可以绑定F5（或Ctrl + F5）来同时启动两个项目？

客户端应用程序我开始使用ng serve（它将在http端口4200上运行）服务器应用程序我开始使用dotnet run（它将在https端口5001上运行）

我在Homepage（根级别）上只有一个常见的.vscode文件夹：

默认情况下，在第一次创建时，launch.json的内容是这样的：

{
   // 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}"
        }
    ,]
}

因此，当我按F5它构建并启动Server应用程序时，页面将在https://localhost:5001打开，从那里我可以导航到https://localhost:5001/api/values并查看WebApi的工作原理。

但客户端应用程序根本没有启动。

所以，我想如果我将Debugger for Chrome扩展程序的设置添加到launch.json，它应该可以工作，所以我点击了Add Configuration并添加了相应的部分：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
},

我将端口从8080更改为4200，因为ng为端口4200上的主机提供服务

但它不会启动客户端应用程序。

请指教。谢谢

Answer 1

我有类似的（用于API的node.js），花了很多时间无法解决，例如使用&&或&。结果是API up或Angular up，而不是两者。

无论如何，我终于意识到同一文件夹/项目/解决方案中的Api和UI都不实用。 API不是特定于UI，它是一个通用的DLL /服务，应该自己选址。所以我将它们分成两个diff文件夹，并有2个VSC实例来运行它们：

1. 在调试模式下启动API
2. 在第二个VSC中，运行ng serve并让它需要时间来构建
3. 当ng说“已成功编译”时，请转至launch.json以启动与Chrome关联的调试条目

他们工作得很好。