Serve Angular spa pathed off the root

Question

I'm looking to upgrade an existing asp.net 4.5 mvc site which has two angular applications to an asp.netcore 2 mvc site with potentially two spa's. using Aspnet Javascriptservices with the new angular cli template.

Ideally i want to host two spa's one at http://mysite/member and the other at http://mysite/admin

I've started with just one members and i initially used <base href="/members/" /> in the index.html (but then swapped to use the baseHref" property in the.angular-cli.json (giving the same results)) which half works. Locally when debugging the app it serves pages and navigates as expected but in the console i can see zone.js errors.

If i open a new tab and paste in

http://localhost:50930/**members**/sockjs-node/info?t=1518084503138

then i get what looks like a correct response

{"websocket":true,"origins":["*:*"],"cookie_needed":false,"entropy":2082738399}

If i deploy this to Azure app service (production) then navigating to

https://mysite.azurewebsites.net/members then the spa doesn't load at all and it seems that the bundled js has the index.html which is loading it inside.

Has anyone managed to use the angular spa template as an application served off the route of an MVC site? I created a ticket on the repo but i suspect its beyond the scope of the project https://github.com/aspnet/JavaScriptServices/issues/1518

Also created a repo to demonstrate what i am trying to achieve https://github.com/tbertenshaw/MultiSpa

Answer 1

You have to configure the webserver to always return the index.html page of your angular pwa.

Default, the server returns an error 404, because for /members there is no file present. But you want angular to handle the routes and therefore you have to always serve the index.html instead of an 404 error page.

This documentation explains this further explicitly for the aspnet JavaScriptServices: https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#routing-helper-mapspafallbackroute