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

时间:2018-01-11 22:37:44

标签: asp.net-core asp-net-core-spa-services

我有一个Angular 5应用程序,我希望使用最新的Angular template RC在ASP.net Core上使用Angular Universal。我已按照文档操作并启动并运行应用程序。问题是我也在使用Angular的i18n tools,它生成多个已编译的应用程序,每个语言环境1个。我需要能够从https://myhost.com/{locale}/主持每个人。

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

路由配置为:

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

SpaServices配置为:

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相关联。有人有什么想法吗?

1 个答案:

答案 0 :(得分:25)

感谢Github上的SteveSandersonMSchris5287指示我解决此问题。

IApplicationBuilder.Map可以将路径分成不同的关注区域。如果您在呼叫app.UseSpa时将呼叫包裹到app.Map,则仅会针对Map呼叫指定的路径处理SPA。 app.UseSpa电话最终看起来像:

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以匹配您的特定配置。