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

我在首页（根级别）上只有一个常见的.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升级，要么是Angular升级，两者都不是。

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

以调试模式启动API
在第二个VSC中，运行ng serve，并花一些时间构建
当ng提示“编译成功”时，转到launch.json以启动与Chrome相关的调试项

它们完美地工作。

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

1 个答案: