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
– H. Herzl, Commented Dec 25, 2016 at 6:05
That's not good idea using asp.net MVC (as user interface) with angular2. — Artin Hassan Falahi
– Artin Hassan Falahi, Commented Dec 25, 2016 at 8: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
– Ali Baig, Commented Jul 9, 2017 at 22:01

Darian Serrano · Accepted Answer · 2016-12-25 20:01:55Z

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, 2016 at 20:01

Darian Serrano

2032 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rough Chop Over a year ago

What a life saver, been searching for this solution for a very long time. Thanks a bunch

Ali Baig · Accepted Answer · 2017-01-02 10:38:26Z

5

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.

answered Jan 2, 2017 at 10:38

Ali Baig

3,8674 gold badges36 silver badges49 bronze badges

1 Comment

fares Ayyad Over a year ago

Why it's not the best approach?

Collectives™ on Stack Overflow

Angular 2 - Routing with ASP.NET MVC

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related