ASP.NET 5 + 2角路由（模板页面不重装） [英] ASP.NET 5 + Angular 2 routing (template page not REloading)

问题描述

2角测试版默认使用HTML5的路由。
然而，当你去一个组成部分，路线变化（如的http：//本地主机：5000 /关于我们）和您重载/刷新页面，没有被加载。

Angular 2 beta uses html5 routing by default. However, when you go to a component and the route changes (eg http://localhost:5000/aboutus) and you reload/refresh the page, nothing is loaded.

问题已在此 <一个被提出href=\"http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser\">post也。
大部分的答案说，如果我们要追求的角2 HTML5路由，然后路由这个问题应该在服务器端的照顾。更多讨论的 这里

The issue has been raised in this post also. Most of the answers say that if we are going to pursue HTML5 routing in angular 2, then this issue of routing should be taken care of in server-side. More discussion here.

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

I am not sure how to handle this issue using the asp.net server environment.

任意角度2开发者那里谁也使用asp.net和遇到这个问题？

Any angular 2 devs out there who also uses asp.net and encounters this issue?

PS。我使用ASP.NET 5.我的角2路由使用MVC路线。

PS. I'm using ASP.NET 5. My Angular 2 routes are using MVC routes.

推荐答案

您所看到的问题与客户端和MVC服务器端路由的路由角之间的差异有关。你实际上得到一个 404找不到页面错误，因为服务器没有该路由控制器和动作。我怀疑你是不是处理这就是为什么它看起来好像什么也没有发生错误。

The problem you're seeing has to do with the difference between Angular routing on the client and MVC server-side routing. You are actually getting a 404 Page Not Found error because the server does not have a Controller and Action for that route. I suspect you are not handling errors which is why it appears as if nothing happens.

当您重装的http：//本地主机：5000 /关于我们或者，如果你要尝试直接从快捷方式或通过键入到地址链接到该网址杆（深联），它向服务器发送一个请求。 ASP.NET MVC将尽力解决这条路，并在你的情况下，它会尝试加载 aboutusController 及运行首页行动。当然，这不是你想要的，因为你的公司简介路线的角度成分。

When you reload http://localhost:5000/aboutus or if you were to try to link to that URL directly from a shortcut or by typing it into the address bar (deep linking), it sends a request to the server. ASP.NET MVC will try to resolve that route and in your case it will try to load the aboutusController and run the Index action. Of course, that's not what you want, because your aboutus route is an Angular component.

你应该做的是创造了ASP.NET MVC路由器的方式来传递的网址，应该由角返回给客户端得到解决。

What you should do is create a way for the ASP.NET MVC router to pass URLs that should be resolved by Angular back to the client.

在你的 Startup.cs 文件，在配置（）方法，添加一个水疗中心，回退路线现有路线：

In your Startup.cs file, in the Configure() method, add an "spa-fallback" route to the existing routes:

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" }
    );
});

通过创建一个指向，最终装入您的角度应用的控制器和视图一个包罗万象的路线，这将允许该服务器不处理的URL将被传递到客户端进行正确的路由。

By creating a catch-all route that points to the Controller and View that ultimately loads your Angular app, this will allow URLs that the server does not handle to be passed onto the client for proper routing.

这篇关于ASP.NET 5 + 2角路由（模板页面不重装）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！