Issue with routing in angular 2 app with asp.net MVC 5 application

Question

I have an angular 2 app which is working fine except for the routing. It is running alongside an MVC5 asp.net app.

The issue is that it always goes to the default route. That is to say, that none of the routes that I provide find a match.

   @RouteConfig([
        { path: '/Page1', name: 'Page1', component: Page1Component, useAsDefault: true },
        { path: '/Page2', name: 'Page2', component: DPage2Component, useAsDefault: false }
  ])

If I try to navigate to: "localhost:8000/Page2" then the MVC view for Page2 is loaded correctly, but then the url is changed to localhost:8000/Page2/Page1 and the angular app for Page1 will load.

I have tried using <base href="/"> in the head of the html page and I have tried with and without the / slashed in the path, but none of there seem to match.

My MVC route config is as follows:

   app.UseMvc(config =>
      {
        config.MapRoute(
          name: "Default",
          template: "{controller}/{action}/{id?}",
          defaults: new { controller = "Home", action = "Index" }
          );
      });

Any ideas on this? Even some logging would be helpful.

I have tried switching from angular2 beta8 to beta 16, but this has not resolved the issue.

Answer 1

Try using the following in config.MapRoute

 app.UseMvc(config => { config.MapRoute( name: "Default", url: "{*.}", defaults: new { controller = "Home", action = "Index" } ); });