title: How to stop ASP.NET MVC from interfering with Angular routing?
body: <p>I am trying to get Angular to work with ASP.NET MVC by following <a href="https://dotnetthoughts.net/deploying-angular-with-asp-net-mvc-5-on-iis/" rel="nofollow noreferrer">this</a> tutorial. So far, after a lot of trial &amp; error I was able to get it to work for the most part. However, the ASP.NET MVC routing is still causing me a lot of trouble and I don't know what to do about this. For example, when I navigate to another page in the frontend, it works fine but as soon as I refresh the page I get a 404 error, because the backend does not know what to do with the Angular route.</p>
  <p>I also noticed that a few minor things like for example the hamburger menu icon in the Angular application are not displayed properly. Instead of the icon it just displays the text &quot;menu&quot;. I assume that this is also related to the routing not working properly.</p>
  <p>This is how my <code>RegisterRoutes</code> implementation looks like:</p>
  <pre><code>public static void RegisterRoutes(RouteCollection routes)
  {
      routes.IgnoreRoute(&quot;{resource}.axd/{*pathInfo}&quot;);
  
      routes.MapRoute(
          name: &quot;Default&quot;,
          url: &quot;{controller}/{action}/{id}&quot;,
          defaults: new { controller = &quot;Angular&quot;, action = &quot;Index&quot;, id = UrlParameter.Optional }
      );
  
      routes.MapRoute(
          name: &quot;Angular&quot;,
          url: &quot;{*url}&quot;,
          defaults: new { controller = &quot;Angular&quot;, action = &quot;Index&quot; }
      );
  }
  </code></pre>
  <p>The second route mapping is just an attempt to solve the routing problem which I found in <a href="https://stackoverflow.com/questions/52046412/angular-6-app-in-net-mvc-5-angular-routing-doesnt-work">this</a> SO question, but it does not seem to be working in my case.</p>
  <p>In my backend, I have the following Index.cshtml to return the Angular page to the web browser:</p>
  <pre><code>@{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;base href=&quot;/&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      @Styles.Render(&quot;~/bundles/angular-css&quot;)
  &lt;/head&gt;
  &lt;body class=&quot;mat-typography&quot;&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
      @Scripts.Render(&quot;~/bundles/angular&quot;)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>To return this as a <code>View</code>, I implemented the following controller:</p>
  <pre><code>public class AngularController : Controller
  {
      // GET: Angular
      public ActionResult Index()
      {
          return View();
      }
  }
  </code></pre>
  <p>How can I configure the routing in ASP.NET MVC so it does not interfere with the Angular routing?</p>