title: Routing into Angular 2 app from MVC site
body: <p>In my ongoing quest of somehow routing from a legacy MVC web site into an Angular 2 SPA on a page by page basis I've finally arrived at the conclusion that it would be best to use Angular 2 routing right off the bat, that is, no query parameter conversion to a valid Angular 2 route, because that has proved to be a total nightmare.</p>
  
  <p>In my legacy web app the plan is to replace the controller action code by a redirect to a corresponding action on <code>AppController</code>, e.g.</p>
  
  <pre><code>public ActionResult Action1(int param1, int param2)
  {
      return RedirectTo("Action1", "App", new { param1, param2 });
  }
  </code></pre>
  
  <p><code>AppController</code> is in an area of its own (<code>Areas.Web</code>), which also houses the Angular 2 app</p>
  
  <pre><code>public class AppController : Controller
  {
      public ActionResult Index()
      {
          return new FilePathResult("~/Areas/Web/index.html", "text/html");
      }
  
      public ActionResult Action1(int param1, int param2)
      {
          return Redirect($"/Areas/Web#/{param1}/{param2}/action1");
      }
  }
  </code></pre>
  
  <p>In <code>index.html</code> I set the <code>base href</code> to</p>
  
  <pre><code>&lt;base href="/Areas/Web/"&gt;
  </code></pre>
  
  <p>So the idea is to have ASP.NET MVC grab <code>index.html</code> and send it to the browser, including the hash location, which should evaluate to</p>
  
  <pre><code>/&lt;param1&gt;/&lt;param2&gt;/action1
  </code></pre>
  
  <p>on the Angular side of things, right?</p>
  
  <p>In my bootstrap code I make sure that the <code>HashLocationStrategy</code> is used,</p>
  
  <pre><code>bootstrap(AppComponent, [provide(LocationStrategy, { useClass: HashLocationStrategy })])
      .then(success =&gt; console.log('Bootstrap success'))
      .catch(error =&gt; console.log(error));
  </code></pre>
  
  <p>Routing for <code>app.component.ts</code> is as follows:</p>
  
  <pre><code>@RouteConfig([
      { path: '/:param1/:param2/action1, name: 'Action1', component: Action1Component}
  ])
  </code></pre>
  
  <p>I would assume that this setup should properly route right into <code>Action1Component</code>, but it doesn't. The route config is completely ignored, <code>Action1</code>'s constructor is never invoked.</p>
  
  <p>Where have I gone wrong?</p>
  
  <p><em>EDIT:</em> What actually works once the Angular app is running is</p>
  
  <pre><code>http://legacy.com/Areas/Web/&lt;param1&gt;/&lt;param2&gt;/action1
  </code></pre>
  
  <p>without the <code>#</code> - but pressing F5 will obviously break this strategy. So not only is the URL that includes the hash sign an invalid route, but the URL without hash tag is perfectly valid. I'm confused....</p>