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