angularasp.net-mvcasp.net-core-mvcangular14angular-migration

Can we run angular SPA application into existing Asp.Net Core Application On Same domain


I am currently overseeing a substantial ASP.NET MVC Core 7 application (Client) that includes Razor pages. In addition, there's an API housed within another project, developed using .NET Core 7. The MVC application communicates with this API to retrieve essential data.

My intention now is to transition from the MVC architecture to Angular 15+ for enhanced frontend capabilities. I am seeking a viable approach to facilitate the coexistence of both applications within the same domain. The objective is to gradually migrate components one by one to Angular, allowing for iterative development and testing. This strategy is imperative since converting the entire application all at once is not a feasible option. Once a component is successfully integrated and operational, I will proceed with deployment.


Solution

  • I think your mean hosting them on the same port. Either you need to proxy the angular client port to back api port (The default visual studio "augular with net core template" use this). Or you could proxy the back api port to the same as angular one. I'm not familiar with angular proxy. But for proxy an asp.net core webapi, you could use ocelot.
    Ocelot is very easy to use. Install the package Ocelot,then create a file ocelot.json in the project root folder. Copy the folloing codes.

    {
      "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"
      }
    }
    

    Then add the following code to program.cs

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

    Then you could use the api's domain and port to visit augular app.