Angular: Resolving Routing conflict of Angular 1 and Angular 2 for ASP.NET MVC and ASP.NET WEBApi

Standard

This is a quick-fix solution, you need to improvise it a lot in-order to make it more like a production code.

Assuming you have followed proper style guidelines for Angular 1 and Angular 2, so application will be already composed into modules within your angular code, follow below routing guideline by introducing module name / application name and then specific location route

Routes = [
    { path: 'home/dashboard', component: DashboardComponent },
    { path: 'home/notification', component: NotificationComponent },
    { path: 'movie/searchMovie', component: SearchMovieComponent },
    { path: 'movie/searchMovieList', component: SearchMovieListComponent },
    { path: 'movie/searchMovieDetail', component: SearchMovieDetailComponent }
];

In asp.net mvc/webapi routeConfig.cs/webapiConfig.cs file you need to define these custom routes before default route

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

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

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

url attribute clearly shows that mvc/webapi routing engine will accept any route if it has movie as or home as starting reference in route pattern and this will help you to get rid of “The resource cannot be found – HTTP 404” error.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s