title: Angular 2 Not Integrating With Controllers Other Than Default Controller in MVC Application
body: <p>I am working on a ASP.Net MVC5 application which also have Web Api controllers. I want to include Angular 2 in my application but the challenge is I cannot re-write the application using Angular + Web Api logic. </p>
  
  <p>There are 2 approaches I could think of:-</p>
  
  <ol>
  <li>I want to include Angular2 in such a way that when a certain url is visited MVC view is returned and for another url angular 2 view is returned.</li>
  <li>My MVC view contains Angular component so that when MVC view is returned then template of Angular component is rendered</li>
  </ol>
  
  <p>In this way, I can replace razor views with HTML views in small releases.</p>
  
  <p>I tried using Approach2 and followed different Angular2 with MVC tutorials but I an stuck in following issues:-</p>
  
  <p>Base URL of my application is :- <a href="http://localhost:8081/" rel="nofollow noreferrer">http://localhost:8081/</a></p>
  
  <p>This is how i added scripts in my <code>_layout.cshtml</code>:-</p>
  
  <pre><code>&lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  &lt;script src="~/systemjs.config.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  System.import('../../app/main.js').catch(function(err) {
  console.error(err);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>When I load the default view using the base URL, it is able to find the node modules and scripts in the path : /node_modules/ or /app/main.ts and the razor view is loaded. However, when I try to load another view in another controller, it gives me error that it is not able to find node_modules in the path: /mycontroller/node_modules/ .</p>
  
  <p>Why is controller name getting appended while it is trying to find node module script and main.ts? How to change this behaviour so that it searches for the scripts from one central location?
  Why is it searching main.ts and node modules script files again when the first view has already view been loaded.
  How to add angular 2 components in multiple razor views</p>