title: Redirect to Angular2 app from within an ASP.NET MVC controller with parameters
body: <p>I'm trying to redirect from an MVC controller to an Angular 2 app that resides within an area of the MVC project, structure is as follows:</p>
  
  <pre><code>Clients.Web (MVC project)
  |
  +--Areas
     |
     +--Legacy
     |  |
     |  +--Controllers
     |     |
     |     +--Action1ApiController
     |
     +--Web
        |
        +--app
        |  |
        |  +--action1
        |  |  |
        |  |  +--action1.component.ts
        |  |
        |  +--action2
        |  |  |
        |  |  +--action2.component.ts
        |  |
        |  +--app.component.ts
        |  +--index.html
        |  +--main.ts
        |
        +--assets (vendor modules, images etc.)
        +--Controllers
        |  |
        |  +--AppController.cs
        |
        +--node_modules
        +--typings
        |
       ...
  </code></pre>
  
  <p>I need to be able to traverse from a legacy MVC page into the Angular 2 app, e.g.</p>
  
  <pre><code>/Web/App/Action1?param1=10&amp;param2=15
  </code></pre>
  
  <p>should be routed to</p>
  
  <pre><code>/Action1/:param1/:param2
  </code></pre>
  
  <p>in Angular. At the same time I need to be able to invoke actions on </p>
  
  <pre><code>/Areas/Legacy/Controllers/Action1ApiController
  </code></pre>
  
  <p>I can't, for the love of cookies, figure out how to do that. In my <code>index.html</code> I set the <code>base href</code> to</p>
  
  <pre><code>&lt;base href="/Areas/Web/"&gt;
  </code></pre>
  
  <p>In that same file I imported the main module with SystemJS,</p>
  
  <pre><code>&lt;script&gt;
    System.config({
       baseURL: './',
       map: {
          'angular2': '/Areas/Web/node_modules/angular2',
          'rxjs': '/Areas/Web/node_modules/rxjs'
       }
    });
    System.defaultJSExtensions=true;
    System.import('/Areas/Web/app/main')
       .then(null,console.error.bind(console));
  &lt;/script&gt;
  </code></pre>
  
  <p>where I then bootstrap the app</p>
  
  <pre><code>import { bootstrap } from 'angular2/platform/browser';
  import { AppComponent } from './app.component';
  
  bootstrap(AppComponent, [])
    .then(success =&gt; console.log('Bootstrap success'))
    .catch(error =&gt; console.log(error));
  </code></pre>
  
  <p>Finally, in <code>app.component</code> I set up routing</p>
  
  <pre><code>import { Component } from 'angular2/core';
  import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, Route, Redirect } from 'angular2/router';
  import { Component1} from './action1/action1.component';
  import { Component2} from './action2/action2.component';
  
  @Component({
      selector: "app",
      templateUrl: 'app/app.component.html',
      styleUrls: ['app/app.component.css'],
      directives: [
          ROUTER_DIRECTIVES,
          Action1Component, 
          Action2Component
      ],
      providers: [
          ROUTER_PROVIDERS
      ]  
  })
  @RouteConfig([
      new Route({ path: '/:param1/:param2, name: 'Action1', component: Action1Component})
  ])
  export class AppComponent {
  }
  </code></pre>
  
  <p>However, if I then navigate to </p>
  
  <pre><code>/Areas/Web/app/index.html?param1=10&amp;param2=!5
  </code></pre>
  
  <p>I get</p>
  
  <pre><code>param1 = 'app'
  param2 = 'index.html'
  </code></pre>
  
  <p>passed into <code>Action1Component</code>, which is clearly not what I intended. Any pointers would be appreciated.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Routing only targets the <code>AppController</code> at the moment,</p>
  
  <pre><code>routes.MapRoute("SPA", "Web/{controller}/{action}/{id}",
      new { controller = "App", action = "Index", area = "Web", id = UrlParameter.Optional },
      new[] { "SomeSite.Areas.Web.Controllers" }); 
  </code></pre>
  
  <p>and the code for the action is</p>
  
  <pre><code>public class AppController : Controller
  {
     public ActionResult Index(int param1, int param2)
     {
         return Redirect($"/Areas/Web/app/index.html?param1={param1}&amp;param2={param2}");
     }
  }
  </code></pre>
  
  <p>As I'm migrating a legacy web site one page at a time, the idea is to have actions <code>Action1, Action2</code> etc. on the <code>AppController</code> and link to these actions from legacy pages.</p>