title: ASP.NET MVC with Angular :- page refresh or reload gives 404 error
body: <p>Angular Ver : 5</p>
  
  <p>I am working on a new project with ASP.NET MVC and have integrated angular 5 with it. The project is working fine except the page refresh yields the 404 page not found error. Whenever i hit refresh from the browser or reload the page, it gives the 404 error.</p>
  
  <p>I have gone through many tutorials and discussions on this Angular page refresh problem, but no luck so far.</p>
  
  <p>I am using the MVC shared view <strong>_Layout.cshtml</strong> to specify the angular lib references and the base reference as follows:-</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;base href="/"&gt;
  
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      @Scripts.Render("~/bundles/bootstrap")
  
      &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/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="~/Web/systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          System.import('Web/main.js').catch(function (err) { console.error(err); });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      @RenderBody()
  
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please suggest where should i make the changes. </p>