NG Build and Kestrel

Configure angular.json and select the ouputhPath to be in ../DatingApp.API/wwwroot. The folder may not exist, create it.

Build the application

ng build

All the SPA files are now present in ../DatingApp.API/wwwroot.

Configure the API to serve static files: open Startup.cs and add to Configure the required configurations to allow the files to be retrieved from wwwroot

public void Configure(IApplicationBuilder app, IHostingEnvironment env, Seed seeder)
{
    // ...
    app.UseAuthentication();
    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.UseMvc();
}

UseDefaultFiles allows for address without a filename to find index.html

UseStaticFiles serves the files from wwwroot

Create Controllers/Fallback.cs a Controller dedicated to handle all the paths that are not mapped by other routes.

public class Fallback : Controller
{
    public IActionResult Index()
    {
        return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html"), "text/HTML");
    }
}

Add the new controller in Startup.Configure

app.UseDefaultFiles();
app.UseStaticFiles();
app.UseMvc(routes =>
{
    routes.MapSpaFallbackRoute("spa-fallback", defaults: new { Controller = "Fallback", Action = "Index" });
});

With this configuration when a user open a url that doesn’t match any controller (eg https://siteurl/members) then the fallback intercepts it an sends to the SPA.