将 Angular 单页应用程序托管在根路径下。

Question

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

理想情况下，我希望在 http://mysite/member 和 http://mysite/admin 上都托管一个spa。

我刚开始只使用 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。

是否有人成功地将angular spa模板用作从MVC站点路径提供的应用程序？ 我在存储库上创建了一个工单，但我怀疑它超出了该项目的范围https://github.com/aspnet/JavaScriptServices/issues/1518

还创建了一个演示我正在尝试实现的存储库 https://github.com/tbertenshaw/MultiSpa

- Tim

---

我不确定这是否有帮助，但我将我的类似React JS前端应用程序托管在IIS的子域上。为此，我需要向IIS添加Urlrewrite以使其正常工作。我不确定这是否适用于你，但是你在Azure上使用urlrewrite吗？ - Edward Chopuryan

你实际上有没有在网络选项卡中观看你的主文件、Polyfills和其他捆绑包中收到的内容？我猜它们全部都包含你的index.html内容。 - VagrantAI

@VagrantAI 是的，虽然它们在磁盘上都包含其预期的最小化丑化JS。但是它们以某种方式为它们的父HTML页面提供服务。 - Tim

@Tim 我不是aspnet专家，你应该搜索aspnet Web服务器配置和官方的Angular文档 https://angular.io/guide/deployment#server-configuration - VagrantAI

你尝试过在--base-href之后使用--deployUrl吗？我们将所有JS托管在CDN上，这就是我们使用的方式。关于此方面的信息并不多，但是这里有一篇文章 https://shekhargulati.com/2017/07/06/angular-4-use-of-base-href-and-deploy-url-build-options/ - Vitalii Chmovzh

Answer 1

你需要配置 Web 服务器，始终返回 Angular 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。

- Andi

---

对此感到困惑，它是否建议创建一个包含与index.html相同代码的视图？我的示例应用程序确实提供了index.html，只是在其中引用的资源(js、css)似乎返回而没有它们的内容，并且带有调用index.html的html。 - Tim

我认为这不会起作用，因为即使它提供了index.html，基本路径也是错误的，它无法找到JS。 - BinaryPatrick

Answer 2

Tim，你有解决这个问题吗？我正在尝试从.NET Core MVC应用程序的子路径中托管Aurelia应用程序。我已经接近成功了，主要困难在于创建适用于生产和开发环境的MVC和Webpack配置。

我的示例项目是基于新的2.1样式Angular SPA模板构建的，该模板在开发模式下使用'UseAngularCliServer'或'UseProxyToSpaDevelopmentServer'中间件，在生产模式下从'dist'目录提供捆绑文件。

更新： 我已经为此场景发布了一个可工作的存储库，没有sockjs-node错误，并且支持HMR，请参见以下主题： https://github.com/aspnet/JavaScriptServices/issues/1518

它可以在开发和生产模式下运行。

- Chris C

Answer 3

我之前在我的应用程序中使用过这个。在稍后的版本中，我添加了缓存以使其更快，但它始终可以在部署的任何地方运行。它使得在服务器之间甚至只是文件夹之间移动文件变得非常容易，特别是当我们在开发、测试和生产服务器之间移动时。

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(); 调用这个中间件。

- BinaryPatrick

---

如果没有使用javascriptservices中间件，那么这个会被使用吗？ - Tim

我不确定它是否可以与服务器端渲染一起使用，但我不知道。 - BinaryPatrick