How to deploy an Angular Web App and an ASP.NET Web API on IIS to work on a subdomain?

Question

I have an Angular application that should run in the following URL:

https://subdomain.domain.com/

I have an ASP.NET API, with versioning and CORS already enabled, that I would like to run in the following URL:

https://subdomain.domain.com/api/v1/[controllers]

I created a new Web Site on IIS called APP and pointed to the Web API release folder. I also created a folder within the Web API release folder named wwwroot and pasted all Angular files from dist folder there.

I am able to call https://subdomain.domain.com/api/v1/getclients and it is retrieving the JSON correctly. However, I am not able to render my Angular App. I am getting a 404 error.

I also have added a web.config file in my Web API folder as per below:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath="dotnet" arguments=".\MyApi.dll" stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout" hostingModel="inprocess">
            </aspNetCore>
    </system.webServer>
  </location>
</configuration>

And I also have added a web.config file (as per below) in my wwwroot folder within the Web API release folder.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    
    <rewrite>
      <rules>
      
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
    
    <httpErrors errorMode="Detailed" />
        <aspNetCore stdoutLogEnabled="true" />
  </system.webServer>
  
    <system.web>
    <customErrors mode="Off" />
  </system.web>
   
</configuration>

I tried changing the web.config files, I searched online other solutions and videos and no solutions found so far.

Answer 1

Your current needs are similar to Angular SPA application. So we don't need to add rewrite rules in web.config.

You can follow my steps to fix the issue.

Steps 1: Publish your angular project and get static publish files like below.

Steps 2: Copy it and paste it under wwwroot folder in asp.net core application.

Steps 3: Add app.MapFallbackToFile("index.html"); your Program.cs file.

namespace AngularSPA1
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // Add services to the container.

            builder.Services.AddControllersWithViews();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (!app.Environment.IsDevelopment())
            {
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseRouting();


            app.MapControllerRoute(
                name: "default",
                pattern: "{controller}/{action=Index}/{id?}");

            app.MapFallbackToFile("index.html");

            app.Run();
        }
    }
}

Steps 4: Then you can deploy this asp.net core application normally.

For more details, you can create a new one for test: