ASP.NET 5 + Angular 2路由(模板页面不重载)

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

这篇文章也提出了这个问题.大多数答案都表示,如果我们要在角度2中进行HTML5路由,那么应该在服务器端处理这个路由问题.这里有更多讨论.

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

任何有角度的2开发人员也使用asp.net并遇到这个问题？

PS.我正在使用ASP.NET 5.我的Angular 2路由正在使用MVC路由.

您看到的问题与客户端上的Angular路由和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();
    }
});

我最喜欢的解决方案是将以下代码添加到Global.asax.cs,它可以非常顺利和可靠地解决问题:

     private const string RootUrl = "~/Home/Index";
     // You can replace "~Home/Index" with whatever holds your app selector ()
     // such as RootUrl="index.html" or any controller action or browsable route

     protected void Application_BeginRequest(Object sender, EventArgs e)
        {
            // Gets incoming request path
            var path = Request.Url.AbsolutePath;

            // To allow access to api via url during testing (if you're using api controllers) - you may want to remove this in production unless you wish to grant direct access to api calls from client...
            var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);
            // To allow access to my .net MVCController for login
            var isAccount = path.StartsWith("/account", StringComparison.InvariantCultureIgnoreCase);
            if (isApi || isAccount)
            {
                return;
            }

            // Redirects to the RootUrl you specified above if the server can't find anything else
            if (!System.IO.File.Exists(Context.Server.MapPath(path)))
                Context.RewritePath(RootUrl);
        }

您需要在ASP.NET MVC中使用此路由

app.UseMvc(routes =>
{
     routes.MapRoute("Default", "{*url}",  new { @controller = "App", @action = "Index" });
});

然后,您需要使用basePath选项设置SystemJS