ASP.NET 5 + Angular 2路由(模板页面不重载)如何解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (111)

Angular 2 beta默认使用html5路由。但是,当转到组件并且路由更改(例如,http:// localhost:5000 / aboutus)并且重新加载/刷新页面时,不会加载任何内容。

如果我们要在Angular 2中追求HTML5路由,那么这个路由问题应该在服务器端处理。更多讨论在这里

我不知道如何使用asp.net服务器环境来处理这个问题。

任何Angular 2的开发者谁也使用asp.net并遇到此问题?

我正在使用ASP.NET 5.我的Angular 2路线正在使用MVC路线。

提问于
用户回答回答于

你所看到的问题与客户端的角度路由和MVC服务器端路由之间的差异有关。你实际上得到一个404 Page Not Found错误,因为服务器没有该路由的Controller和Action。我怀疑你没有处理错误,这就是为什么它没有任何反应。

当重新加载http://localhost:5000/aboutus或者尝试直接通过快捷方式链接到该URL或将其键入地址栏(深层链接)时,它会向服务器发送请求。ASP.NET MVC将尝试解决该路由,并在您的情况下,它会尝试加载aboutusController并运行该Index操作。当然,这不是你想要的,因为你的aboutus路线是一个Angular组件。

你应该做的是为ASP.NET MVC路由器创建一个方法来传递应该由Angular解决的URL到客户端。

Startup.cs文件中,在该Configure()方法中,将“spa-fallback”路线添加到现有路线中:

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    // when the user types in a link handled by client side routing to the address bar 
    // or refreshes the page, that triggers the server routing. The server should pass 
    // that onto the client, so Angular can handle the route
    routes.MapRoute(
        name: "spa-fallback",
        template: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
});

通过创建指向最终加载Angular应用程序的Controller和View的catch-all路径,这将允许服务器无法处理的URL传递到客户端以进行正确的路由。

用户回答回答于

在你Startup.cs添加这个Configure方法。这必须在其他app陈述之前。

app.Use(async (context, next) => {
    await next();

    if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value)) {
        context.Request.Path = "/index.html"; // Put your Angular root page here 
        await next();
    }
});

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励