如何在 F5 或 Ctrl+F5 上从 VSCode 启动 Angular 应用程序和 WebApi 服务答案

【问题标题】：How to start both Angular app and WebApi service from VSCode on F5 or Ctrl+F5如何在 F5 或 Ctrl+F5 上从 VSCode 启动 Angular 应用程序和 WebApi 服务
【发布时间】：2019-03-30 08:38:08
【问题描述】：

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

--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 上运行）

我在主页（根级别）上只有一个常见的 .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 时，它会构建并启动服务器应用程序，页面会在 https://localhost:5001 打开，从那里我可以导航到 https://localhost:5001/api/values 并查看 WebApi 的工作原理。

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

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

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

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

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

请指教。谢谢

【问题讨论】：

标签： visual-studio-code

【解决方案1】：

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

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

在调试模式下启动 API
在第二个 VSC 中，运行 ng serve 并让它花费一些时间来构建
当 ng 显示“编译成功”时，转到 launch.json 以启动与 Chrome 关联的调试条目

他们完美地工作。

【讨论】：