Serve Angular spam with root

Question

I want to upgrade an existing asp.net 4.5 mvc site that has two angular applications on an asp.netcore 2 mvc site with potentially two spa treatments using Aspnet Javascriptservices with the new angular cli template.

Ideally, I want to host two spas in http://mysite/member , and the other in http://mysite/admin

I started with only members , and I initially used <base href="/members/" /> in index.html (but then replaced it with the baseHref property in the .angular-cli.json file (giving the same results) ). that half works. Locally, while debugging the application, it serves the pages and moves as expected, but in the console I see zone.js. errors

If I open a new tab and paste

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

then i get what looks like the correct answer

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

If I deploy this Azure application (production) and then going to

https://mysite.azurewebsites.net/members , then the spa does not load at all, and it looks like there is index.html in the js bundle that loads it inside.

Has anyone managed to use the angular template template as an application filed from the MVC site route? I created a repo ticket, but I suspect it is beyond the scope of the project https://github.com/aspnet/JavaScriptServices/issues/1518

A repo has also been created to demonstrate what I'm trying to achieve. https://github.com/tbertenshaw/MultiSpa

Answer 1

You need to configure the web server so that it always returns the index.html page of your angular pwa.

By default, the server returns a 404 error because there is no file for / members. But you want angular to handle routes, and therefore you should always maintain index.html instead of the 404 error page.

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

Answer 2

I have used this before in my applications. In a later version, I added caching to make it faster, but it always works no matter where it was deployed. This makes moving files between servers or even just folders very easy, especially when we move between dev, test and prod servers.

 using System; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Http; namespace Management.Middleware { public class AngularDefaultRouteMiddleware { private readonly RequestDelegate _next; public AngularDefaultRouteMiddleware(RequestDelegate next) { _next = next; } public async Task Invoke(HttpContext context) { if (context.Request.Path == "/") { await context.Response.WriteAsync(await GetAngularSpa(context.Request.PathBase)); } else { await _next(context); if (context.Response.StatusCode == 404 && !context.Response.HasStarted) { await context.Response.WriteAsync(await GetAngularSpa(context.Request.PathBase)); } } } private async Task<string> GetAngularSpa(string pathBase) { string html = await System.IO.File.ReadAllTextAsync($"{Environment.CurrentDirectory}\\wwwroot\\index.html"); return html.Replace("<base href='/'>", $"<base href='{pathBase}'>"); } } public static class AngularDefaultRouteMiddlewareExtensions { public static IApplicationBuilder UseAngularDefaultRoute(this IApplicationBuilder app) { return app.UseMiddleware<AngularDefaultRouteMiddleware>(); } } } 

Then you can simply call this middleware with Startup.cs using app.UseAngularDefaultRoute();