Как запустить приложение Angular и службу WebApi из VSCode на F5 или Ctrl + F5

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 работает.

Но клиентское приложение вообще не запускается.

Итак, я подумал, добавлю ли я отладчикчтобы настройки расширения Chrome запускались на .json, он должен работать, поэтому я нажал на кнопку «Добавить конфигурацию» и добавил соответствующий раздел:

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

Я изменилпорт от 8080 до 4200, так как ng обслуживает хосты через порт 4200

, но не запускает клиентское приложение.

Пожалуйста, советуйте.Спасибо

Answer 1

У меня есть аналог (node.js для API), и я провел довольно много раз, но не могу решить, например, используйте && или &.Результатом является либо API up, либо Angular up, но не оба.

Во всяком случае, я наконец-то понял, что Api и UI в одной папке / project / solution не практичны.API не является специфическим для пользовательского интерфейса, это универсальная DLL / служба, которая должна размещаться где-то сама по себе.Поэтому я разделил их на две папки diff и имею 2 экземпляра VSC для их запуска:

1. , запустите API в режиме отладки
2. во 2-м VSC, запустите ng serve и дайте ему занятьвремя для сборки
3. , когда ng говорит «Скомпилировано успешно», перейдите к launch.json, чтобы запустить запись отладки, связанную с Chrome

, они работают отлично.