ASP.NET Core multiple angular app

Question

I have an ASP.NET Core 2.1 and I need to setup workspace for multiple Angular applications with following routing:

http://someurl.com/main -> first app
http://someu

Answer 1

You are registering the Single Page Application (SPA) on the app not the mapped path:

app.Map("/admin", l =>
{
    app.UseSpa(spa =>

Change app to l to fix the issue:

app.Map("/admin", l =>
{
    l.UseSpa(spa =>

Answer 2

@sven.to's answer works, I am just pasting here the full snippet for clarity:

        app.Map("/foo", l => l.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        }));

This adds the /foo prefix and now https://localhost:44383/foo/main.js will show you main.js while https://localhost:44383/main.js will give you 404 Not Found.

Answer 3

After dealing with such scenario in real time finally got the working solution.

Source code: https://github.com/alpitg/.NetCoreSpa

Important steps : 1. In Startup.cs file under Configure() use following code,

  // for each angular client we want to host use Map function
            app.Map(new PathString("/clientapp1"), client =>
            {
                string clientApp1Path = env.IsDevelopment() ? "ClientApp1" : @"ClientApp1/dist";

                // Each map gets its own physical path for it to map the static files to. 
                StaticFileOptions clientApp1Dist = new StaticFileOptions()
                {
                    FileProvider = new PhysicalFileProvider(
                            Path.Combine(Directory.GetCurrentDirectory(), clientApp1Path)
                        )
                };

                // Each map its own static files otherwise it will only ever serve index.html no matter the filename 
                client.UseSpaStaticFiles(clientApp1Dist);

                client.UseSpa(spa =>
                {
                    spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
                    spa.Options.SourcePath = "ClientApp1";

                    if (env.IsDevelopment())
                    {
                        // it will use package.json & will search for start command to run
                        spa.UseAngularCliServer(npmScript: "start");
                    }
                    else
                    {
                        spa.Options.DefaultPageStaticFileOptions = clientApp1Dist;
                    }
                });
            });

2. package.json file changes,

       "start": "ng serve --servePath / --baseHref /newui/",
       "build": "ng build --baseHref /newui/",
       "build:ssr": "npm run build --baseHref /newui/ -- --app=ssr --output-hashing=media",
   

These are the primary changes i have shared here. Fore more detail please use the source code and compare your changes.

NOTE: Tested with .net core 2.2 & angular 7

For more detail please refer my blog: https://wayeasier.home.blog/2019/07/21/hosting-two-angular-app-behind-net-core-web-application/