【问题标题】:Make Angular routes work inside ASP.NET Core 2.0 app使 Angular 路由在 ASP.NET Core 2.0 应用程序中工作
【发布时间】:2018-05-16 04:27:24
【问题描述】:

我有一个 ASP.NET Core 2.0 应用程序和 Angular 5 应用程序。这些是单独开发的(VS2017 中的第一个,VS Code 中的第二个)。所以我在 VSTS 中设置了 CD/CI,Angular 应用程序在构建过程中被注入到 ASP.NET Core 应用程序的 /angularapp/ 文件夹中。

为了在用户打开 http://domain/angularapp 时使 Angular 应用程序正常工作,我在 IIS 中设置了 URL 重写规则(所以当它点击 /angularapp 时,它会被重写为 /angularapp/index.html)。

但是 Angular 应用程序中的更深层次的链接呢?如果我尝试打开 /angularapp/feature,我会收到来自 ASP.NET Core 2.0 的 404 错误。我可以解决这个问题吗?

【问题讨论】:

标签: angular iis asp.net-core asp.net-core-2.0


【解决方案1】:

Janne-Harju 是对的。解决方案在这里 - https://code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f。但为了让它发挥作用,请确保你有这个:

app.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" }});

【讨论】:

  • 我试过 app.UseDefaultFiles 但它没有用,直到我使用了code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f 上提供的完整解决方案所以,为了将来参考,请您更新您的答案,以便如果 msdn 链接没有'不工作任何人,其他用户仍然可以获得完整的解决方案。
【解决方案2】:

如果您正在寻找一种解决方案,使您的 api 处于相同的一般路线上,例如“/api/”。其他所有内容都应该路由回 SPA,那么这对您应该很有效。

app.UseWhen(x => !x.Request.Path.Value.StartsWith("/api"), builder =>
{
    builder.Use(async (context, next) =>
        {
            await next();
            if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        })
        .UseDefaultFiles(new DefaultFilesOptions {DefaultFileNames = new List<string> {"index.html"}})
        .UseStaticFiles()
        .UseMvc();
});
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

【讨论】:

    【解决方案3】:

    如果您的控制器返回404 (not found),此处给出的答案将部分有效,但也会将请求路由到index.html。我正在使用以下代码:

    app.Use(async (context, next) =>
            {
                await next();
    
                if (!Path.HasExtension(context.Request.Path.Value) &&
                    !context.Request.Path.Value.StartsWith("/api/"))
                {
                    context.Request.Path = "/index.html";
                    await next();
                }
            });
    
    app.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" }});
    

    这会将所有请求路由到index.html,除了带有扩展名和api路由的请求。请注意,api 位是硬编码的,如果您更改资源路径,它将停止工作。

    【讨论】:

      【解决方案4】:

      我不确定 .net core 2.0 但这对我来说适用于 .net core 1.1 https://github.com/JanneHarju/MultiSourcePlayList/blob/076c6e4108cbae3bb5128e7f176ed35a61593922/Startup.cs#L169

          app.Use(async (context, next) =>
              {
                  await next();
      
                  if (context.Response.StatusCode == 404 &&
                      !Path.HasExtension(context.Request.Path.Value) &&
                      !context.Request.Path.Value.StartsWith("/api/"))
                  {
                      context.Request.Path = "/index.html";
                      await next();
                  }
              });
      

      在我的 repo 中,还有 else if 部分用于角度路线,但我认为它不再有用(或者可能曾经没有)。

      【讨论】:

      • 请问您能解决问题中的实际问题吗?对于核心 2.0,因此即使子文件夹也可以在 Angular 5 应用程序中使用。
      • 那么 /angularapp/feature 是您的角度路线还是什么?你能提供你的应用路由模块吗?
      • 我的建议也适用于 .Net Core 2.0 docs.microsoft.com/en-us/aspnet/core/fundamentals/…
      • 最初我添加这个是为了让页面刷新与 Angular 2 应用程序一起工作。这里有一点关于code.msdn.microsoft.com/How-to-fix-the-routing-225ac90f
      • 谢谢大佬,让我试试看。如果不是,我将创建一个公共回购来说明我的意思。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-03-27
      • 2018-05-08
      • 1970-01-01
      • 1970-01-01
      • 2017-03-06
      • 2019-07-04
      • 2018-11-16
      相关资源
      最近更新 更多