在ASP.net Web API中为Angular前端设置路由

Question

我正在尝试设置我当前的Web API以提供角度6前端应用程序。

我的角度项目位于Web API下的“app”目录中。

我可以很好地导航到基页，所有前端路由工作正常。

我的发展是：https://test2.localhost.com/app/

我必须将index.html中的基本位置设置为base href =“/ app /”。

现在我的问题是直接导航到app的子网址。例如 ：

https://test2.localhost.com/app/information/planets

我得到一个404，让我相信问题在于Web API路由。

如果我要在https://test2.localhost.com/app/启动角度应用程序，我可以导航到网址，但不是从浏览器的冷启动。

我在web.config中尝试了几个重写规则，但似乎都失败了并阻止我导航到https://test2.localhost.com/app

Web API在IIS上运行。

在nodeJs上运行前端时，路由工作正常，我可以从冷启动导航到所有子URL。

任何帮助将不胜感激。

Answer 1

假设您也有MVC路由，请尝试使用route.config：

public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
            constraints: new
            {
                // Add all routes we need MVC to handle here
                serverRoute = new ServerRouteConstraint(url =>
                {
                    return url.PathAndQuery.StartsWith("/qbo",
                        StringComparison.InvariantCultureIgnoreCase);
                })
            });

        // This is a catch-all for when no other routes matched. Let the Angular 2+ router take care of it
        routes.MapRoute(
            name: "angular",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index" } // The view that bootstraps Angular 2+
        );
    }

这是路径约束类：

using System;
using System.Web;
using System.Web.Routing;

namespace Web
{
public class ServerRouteConstraint : IRouteConstraint
{
    private readonly Func<Uri, bool> _predicate;

    public ServerRouteConstraint(Func<Uri, bool> predicate)
    {
        this._predicate = predicate;
    }

    public bool Match(HttpContextBase httpContext, Route route, string parameterName,
        RouteValueDictionary values, RouteDirection routeDirection)
    {
        return this._predicate(httpContext.Request.Url);
    }
}
}

我已经使用了很长时间了，不知道哪个博客可能会受到启发。

Answer 2

我想通了，不确定它是否是最好的方式，但它有效。

我创建了一个名为FEController（FrontEndController）的控制器。

public ActionResult Index()
{
  return File(Server.MapPath("/app/") + "index.html", "text/html");
}

然后在RouteConfig.cs中添加了一个映射路由

routes.MapRoute(
   "Angular",
   "{app}/{*pathInfo}",
   new { controller = "FE", action = "Index", id = UrlParameter.Optional }
);

routes.MapRoute(
   name: "Default",
   url: "api/{controller}/{action}/{id}",
   defaults: new { controller = "HelpMain", action = "Index", id = UrlParameter.Optional }
);

经过测试和确认工作。