0

I am trying to set up my current Web API to serve an Angular 6 frontend application.

My Angular project is located in 'app' directory under the Web API.

I can navigate to the base page fine and all the frontend routing works fine.

My development is on: https://test2.localhost.com/app/

I did have to set the base location in index.html to base href="/app/".

Now my issue comes to direct navigation to sub urls of app. For example :

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

I get a 404 which leads me to believe the issue lies within the Web API routing.

If i was to start the angular app at https://test2.localhost.com/app/ i can navigate to the url, but not from a cold start in the browser.

I have tried several rewrite rules within the web.config but all seems to fail and stops me from navigate to the https://test2.localhost.com/app

The Web API is running on IIS.

When running the frontend on Node.Js the routing works fine and I can navigate to all sub urls from a cold start.

2
  • Just run the app in Node.js then. Separating the frontend and backend is perfectly fine Sep 13, 2018 at 14:55
  • I accept that its perfectly fine to separate the frontend and backend, but manageability is key having it in one application/deployment. Sep 13, 2018 at 15:25

2 Answers 2

0

Assuming you also have MVC routes, try this for your 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+
        );
    }

Here's the route constraint class:

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

I've been using this for a long time, not sure which blog I may have been inspired by.

0

I figured it out, not sure if its the best way but it works.

I created a controller called FEController (FrontEndController).

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

Then added a map route in the 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 }
);

Tested and confirmed working.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.