Можем ли мы запустить приложение angular SPA в существующем базовом приложении Asp.Net в том же домене?

Question

В настоящее время я курирую важное приложение ASP.NET MVC Core 7 (клиент), которое включает страницы Razor. Кроме того, в другом проекте имеется API, разработанный с использованием .NET Core 7. Приложение MVC взаимодействует с этим API для получения важных данных.

Сейчас я намерен перейти с архитектуры MVC на Angular 15+ для расширения возможностей внешнего интерфейса. Я ищу жизнеспособный подход, облегчающий сосуществование обоих приложений в одном домене. Цель состоит в том, чтобы постепенно переносить компоненты один за другим в Angular, обеспечивая итеративную разработку и тестирование. Эта стратегия обязательна, поскольку одновременное преобразование всего приложения не представляется возможным. Как только компонент будет успешно интегрирован и введен в эксплуатацию, я приступлю к его развертыванию.

Answer 1

Я думаю, вы имеете в виду размещение их на одном порту. Либо вам нужно проксировать порт клиента Angular для резервного порта API (это использует визуальная студия по умолчанию «augular с шаблоном net core»). Или вы можете проксировать задний порт API так же, как угловой. Я не знаком с угловым прокси. Но для прокси-сервера ядра asp.net webapi вы можете использовать ocelot.
Оцелот очень прост в использовании. Установить пакетOcelot, затем создайте файлocelot.jsonв корневой папке проекта. Скопируйте следующие коды.

      {
  "Routes": [
    {
      "UpstreamPathTemplate": "/{everything}",
      "UpstreamHttpMethod": [ "Get" ,"Post","Put","Delete"],
      "DownstreamPathTemplate": "/{everything}",
      "DownstreamScheme": "http",        //change to https on your needs
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",      //input the domian of you angular app
          "Port": 3000             //input the port of angular app
        }
      ]
    }
  ],

  "GlobalConfiguration": {
    "RequestIdKey": "OcRequestId",
    "AdministrationPath": "/administration"
  }
}

Затем добавьте следующий код в program.cs

      builder.Configuration.AddJsonFile("ocelot.json");
builder.Services.AddOcelot(builder.Configuration);
...
await app.UseOcelot();
app.Run();

Затем вы можете использовать домен и порт API для посещения приложения augular.