Angular 2 and ASP.NET MVC 4 routing are not workin

Question

I have implemented Angular2 in ASP.NET MVC 4 project. MVC routing is overriding Angular 2 routing. How can I handle both routing together?

I have done following modification:

_layout.cshtml:

<base href="/"/>

app.routing.ts:

const route: Routes= [
{path: 'firstpage', component: firstComponent},
{path: 'secondpage', component: secondComponent}
]

I have added below code above MVC default route in RouteConfig.cs:

routes.MapRoute(
    name: "app1",
    url: "app1/{*url}",
    defaults: new { controller = "app1", action = "Index" }
    );

I have tried using below urls:

http://localhost:50450/app1/firstpage

http://localhost:50450/#/app1/firstpage

Still is not working, what should I do or did I miss something?

Answer 1

the way I handled it is adding the same routes from the angular route in my RouteConfig like this:

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

so now if the route is http://localhost:3000/routeUrl the .net side will just forward the request over to home controller, index action and render it as if it were a request like this http://localhost:3000/ then angular 2 router can take over and do its thing.