Question

我希望将现有的 asp.net 4.5 mvc 网站升级为 asp.netcore 2 mvc 网站，该网站可能有两个spa应用程序。使用Aspnet Javascriptservices 和新的角度cli模板。

理想情况下，我想在http://mysite/member主持两个水疗中心，在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>();
        }
    }
}

然后，您可以使用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

它可以在开发和生产模式下工作。

服务Angular spa打破根

3 个答案: