服務Angular spa打破根

Question

我正在尋找升級現有的asp.net 4.5 mvc網站，它有兩個角度應用程序到asp.netcore 2 mvc網站，可能有兩個spa。 使用Aspnet Javascriptservices和新的角度cli模板。

理想情況下，我想在http://mysite/member主持兩個spa，另一個在http://mysite/admin

我從一個members開始，我最初在index.html中使用<base href="/members/" /> （但隨后在.angular-cli.json中交換使用baseHref“屬性（給出相同的）結果））一半工作。在調試應用程序時，它本地提供頁面並按預期導航，但在控制台中我可以看到zone.js錯誤。

如果我打開一個新標簽並粘貼

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

然后我得到了正確的回應

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

如果我將此部署到Azure應用服務（生產），然后導航到

https://mysite.azurewebsites.net/members然后spa根本沒有加載，似乎捆綁的js有index.html，它正在加載它。

有沒有人設法使用角度spa模板作為MVC網站路線下的應用程序？ 我在回購中創建了一張票，但我懷疑它超出了項目的范圍https://github.com/aspnet/JavaScriptServices/issues/1518

還創建了一個回購來展示我想要實現的目標https://github.com/tbertenshaw/MultiSpa

Answer 1

您必須將網絡服務器配置為始終返回角度pwa的index.html頁面。

默認情況下，服務器返回錯誤404，因為/ members沒有文件存在。 但是你想要angular處理路由，因此你必須始終提供index.html而不是404錯誤頁面。

本文檔對aspnet JavaScriptServices進一步明確解釋了這一點： https ： //github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#routing-helper-mapspafallbackroute

Answer 2

我以前在我的應用程序中使用過這個。 在更高版本中，我添加了緩存以使其更快，但無論在何處部署，它始終都能正常工作。 它使得在服務器甚至文件夾之間移動文件非常容易，特別是當我們在dev，test和prod服務器之間移動時。

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>();
        }
    }
}

然后你可以使用app.UseAngularDefaultRoute();從Startup.cs調用這個中間件app.UseAngularDefaultRoute();

Answer 3

蒂姆，你有沒有得到這個工作？ 我目前正在嘗試從.NET Core MVC應用程序中的子路徑托管Aurelia應用程序。 我幾乎就在那里，主要的困難在於創建一個適用於生產和開發的MVC和Webpack配置。

我的示例項目基於新的2.1樣式Angular SPA模板，該模板在開發模式下使用'UseAngularCliServer'或'UseProxyToSpaDevelopmentServer'中間件，並在生產模式下從'dist'目錄提供捆綁文件。

更新：我已經為這個場景發布了一個工作回購，沒有sockjs-node錯誤，也適用於HMR，請看這里的主題： https ： //github.com/aspnet/JavaScriptServices/issues/1518

它適用於開發和生產模式。