如何为使用 SpaServices 托管的多个 SPA 配置 ASP.net Core 服务器路由

问题描述

我有一个 Angular 5 应用程序，我想使用最新的 Angular 模板 RC.我已经按照文档启动并运行了应用程序.问题是我也在使用 Angular 的 i18n 工具，它生成多个已编译的应用程序，每个区域设置 1 个.我需要能够从 https://myhost.com/{locale}/ 托管每个.

I have an Angular 5 application that I want to host with Angular Universal on ASP.net Core using the latest Angular template RC. I've followed the docs and have the application up and running. The problem is that I am also using Angular's i18n tools, which produce multiple compiled applications, 1 per locale. I need to be able to host each from https://myhost.com/{locale}/.

我知道我可以为每个区域设置启动 ASP.net Core 应用程序的实例，并在网络服务器中设置托管以将适当的路径路由到关联的应用程序，但这对我来说似乎太过分了.

I know that I can spin up an instance of the ASP.net Core app for each locale, and set up hosting in the webserver to have the appropriate paths route to the associated app, but this seems excessive to me.

路由配置为:

// app is an instance of Microsoft.AspNetCore.Builder.IApplicationBuilder
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller}/{action=Index}/{id?}");
});

SpaServices 配置为:

SpaServices are configured with:

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    spa.UseSpaPrerendering(options =>
    {
        options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
        options.BootModuleBuilder = env.IsDevelopment()
            ? new AngularCliBuilder(npmScript: "build:ssr:en")
            : null;
        options.ExcludeUrls = new[] { "/sockjs-node" };
        options.SupplyData = (context, data) =>
        {
            data["foo"] = "bar";
        };
    });

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

我查看了 Github 上的文档和源代码，但找不到如何配置 ASP.net Core 以将特定路由与给定 SPA 相关联.有人有什么想法吗?

I've looked through the documentation and the source on Github, and I cannot find how to configure ASP.net Core to associate a specific route with a given SPA. Anyone have any ideas?

推荐答案

感谢 SteveSandersonMS 和 chris5287 在 Github 上为我指明了解决方案.

Thanks to SteveSandersonMS and chris5287 over on Github for pointing me towards the solution on this.

IApplicationBuilder.Map 可以将路径隔离到不同的关注区域.如果您将 app.UseSpa 的调用包装在对 app.Map 的调用中，则 SPA 将仅针对 Map 指定的路径进行处理> 打电话.app.UseSpa 调用最终看起来像:

IApplicationBuilder.Map can segregate paths into different areas of concern. If you wrap a call to app.UseSpa in a call to app.Map, the SPA will be handled only for the path specified by the Map call. The app.UseSpa call ends up looking like:

app.Map("/app1", app1 =>
{
    app1.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501

        spa.Options.SourcePath = "ClientApp";

        spa.UseSpaPrerendering(options =>
        {
            options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
            options.BootModuleBuilder = env.IsDevelopment()
                ? new AngularCliBuilder(npmScript: "build:ssr:en")
                : null;
            options.ExcludeUrls = new[] { "/sockjs-node" };
            options.SupplyData = (context, data) =>
            {
                data["foo"] = "bar";
            };
        });

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start --app=app1 --base-href=/app1/ --serve-path=/");
        }
    });
});

您可以根据需要多次调用 app.Map 来配置您的 SPA.还要注意最后对 spa.UseAngularCliServer 调用的修改:您需要设置 --base-href 和 --serve-path> 匹配您的特定配置.

You can make as many calls to app.Map as necessary to configure your SPAs. Also note the modification to the spa.UseAngularCliServer call at the end: you will need to set --base-href and --serve-path to match your particular config.

这篇关于如何为使用 SpaServices 托管的多个 SPA 配置 ASP.net Core 服务器路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！