Angular 2 - Routing with ASP.NET MVC

Question

I am trying to use ASP.NET MVC (not core) with AngularJS 2 and having some issues with the routing.

First in RouteConfig.cs, I have following routes defined

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

// 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",
    url: "{*url}",
    defaults: new { controller = "Home", action = "Index" }
);

In my app.route.ts (angular routes), I have just defined a couple of routes. My default route redirects to the other route like

export const router: Routes = [{
        path: '',
        redirectTo: 'auctions/e231',
        pathMatch: 'full'
    },
    {
        path: 'auctions/:id',
        component: AuctionComponent,
        children: []
    }
];

When I run the application, my server route /Home/Index is served up fine which loads the angular application and default route in my app.route.ts redirects me to auctions/e231 and my browser's final URL becomes

http://localhost:53796/auctions/e231

Everything works as expected but when I refresh the page with this URL, I get a server error for resource not found, which is also expected because it looks for a Controller named Auctions which is not present in MVC. I want to know why my spa-fallback route in RouteConfig.cs doesn't picked up? Also is there a better way to handle this scenario in asp.net mvc because I want to able to use some of my MVC controller's actions like /Account/Login and others.

Why do you don't use one route from server side and another from client side ? I mean let razor load home view and from html and js let angular router works ? — H. Herzl, Dec 25 '16 at 06:05
That's not good idea using asp.net MVC (as user interface) with angular2. — Artin Falahi, Dec 25 '16 at 08:14
@HassanFalahi Yes but the requirement was such at that time to make use of Identity server and use built in templates for user management — Ali Baig, Jul 09 '17 at 22:01

score 7 · Answer 1 · answered Dec 25 '16 at 20:01

7

The problem is that when you refresh the page, the first route will be used, because it will try to get a controller with name Auctions. If you remove that first route configuration (Default) and only use the second (spa-fallback), it will work ok, that's how I used in my projects, only put before spa-fallback other mvc routes that you want to redirect to other mvc controllers.

answered Dec 25 '16 at 20:01

Darian Serrano

203
2
3

What a life saver, been searching for this solution for a very long time. Thanks a bunch – Rough Chop Feb 02 '18 at 16:07

score 5 · Accepted Answer · answered Jan 02 '17 at 10:38

Although not the best approach in my opinion but worked nevertheless. I made it work using the constraints in my route. I updated my default route to:

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
    constraints: new { controller = "Home|Account|Upload|Resource" } // this is basically a regular expression
);

Where I only had 4 MVC controllers (Home, Account, Upload, Resource). My spa-fallback route is under the default one so if we type anything other than these controller names, angular will try to find it in its route with the default /Home/Index server path.

I hope it helps someone.

Why it's not the best approach? – fares Ayyad Jul 02 '19 at 08:33 — fares Ayyad, Jul 02 '19 at 08:33

Angular 2 - Routing with ASP.NET MVC

2 Answers2