Как разместить веб-API с помощью решения Angular с ядром .NET

Question

Использование .NET Core и angular для самостоятельного размещения пользовательского интерфейса и API

Как настроить свое угловое / противное решение, чтобы можно было запустить следующий сценарий.

Перейдите к localhost: 4200 / home, т.е. в Chrome Я нажимаю кнопку, которая вызывает (в угловом коде) «api / values», а не «localhost: 5000 / api / values»

Вот шаги, которые я предпринимаю, чтобы повторить свое решение.

В пределах кода терминала

ng new myui --routing
cd myui
ng serve ## opens the default angular project on localhoost:4200/

открыть терминал в каталоге этого проекта

dotnet new webApi  ##

Большинство моих попыток запустить это путем изменения настроек в launchsettings.json заканчиваются ошибками на странице не найдены или тем, что пользовательский интерфейс в настоящее время использует этот порт

Answer 1

Да, вы можете сделать это, и есть встроенная поддержка, с на этой странице документа , выполните в командной строке следующее:

dotnet new angular

Затем в созданной для вас папке ClientApp выполните:

npm install

И после этого вернитесь в исходную папку, чтобы создать и запустить приложение:

dotnet build
dotnet run

После этого у вас будет один хост, который будет обслуживать как вашего углового клиента, так и ваш бэкэнд API, вы можете использовать API, например ::

http://localhost:5000/api/sampledata/weatherforecasts

И клиент будет обслуживаться по любому другому маршруту, который не соответствует контроллеру MVC, например ::

http://localhost:5000

То, что происходит, довольно просто, это в основном приложение MVC с ядром dotnet, которое обслуживает угловое приложение из действия контроллера по умолчанию (/home/index). Существует второй контроллер который имеет действия API.

Edit:

Начиная с последнего шаблона, Angular-файлы обслуживаются из промежуточного программного обеспечения SPA, которое по умолчанию добавляется после промежуточного программного обеспечения MVC. Таким образом, вы сначала нажмете на контроллер API, который добавлен как часть шаблона (и любые другие контроллеры MVC, которые вы решите добавить). Затем вы нажмете на промежуточное ПО SPA, которое просто обслуживает статические файлы Angular.

Есть способы настроить этот процесс (например, для обслуживания нескольких различных SPA), вы можете просмотреть исходный код, который добавляет промежуточное программное обеспечение здесь с помощью вызова здесь , вы могли бы затем переопределите файловый провайдер, который будет выбран здесь .

Answer 2

Angular httpclient нужен полный URL для достижения конечной точки. Я обычно храню "http://localhost:5000/api/" в глобальной переменной, сою в каждом сервисе, который я называю httpclient.get (variableName + 'values') .... Таким образом, я могу легко изменить свой URL-адрес webapi при развертывании или изменении вернуться на локальный сервер для отладки.