title: Angular links breaking on server
body: <p>We are dealing with a situation similar to these <a href="https://stackoverflow.com/questions/14168836/refreshing-page-gives-page-not-found">404 Refresh</a> <a href="https://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-mode/16570533">scenarios</a>
  We're in html 5 mode, and so we need rewriting to happen to fix the urls. The problem is, solutions that work for the deployed app, do not work in Visual Studio during development. </p>
  
  <p>Our solution for the deployed application works by putting the following in the web.config:</p>
  
  <pre><code>&lt;rewrite&gt;
    &lt;rules&gt;
      &lt;rule name="AngularJS Routes" stopProcessing="true"&gt;
        &lt;match url=".*" /&gt;
        &lt;conditions logicalGrouping="MatchAll"&gt;
  
          &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
          &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;
          &lt;add input="{REQUEST_URI}" pattern="(api)" negate="true" /&gt;
          &lt;add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /&gt;
  
        &lt;/conditions&gt;
        &lt;action type="Rewrite" url="/myAppName/" /&gt;
      &lt;/rule&gt;
    &lt;/rules&gt;
  &lt;/rewrite&gt;
  </code></pre>
  
  <p>And then the following change for index.html:</p>
  
  <pre><code>&lt;base href="/myAppName/"&gt;
  </code></pre>
  
  <p>This mostly works great except for links we have built in Angular. For example</p>
  
  <pre><code>&lt;a href="/partDetails/"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The deployed app will not put "myAppName" in the url. Why is this?</p>
  
  <p><strong>The second issue</strong> is that in our Visual Studio dev environment the <code>&lt;base href="/myAppName/"&gt;</code> breaks the application. This throws the app into generating an endless string of errors in the output that look like this:</p>
  
  <pre><code>SourceMap http://localhost:40288/app.module.js.map read failed: Unexpected character encountered while parsing value: &lt;. Path '', line 4, position 1..SourceMap http://localhost:40288/app.core.module.js.map read failed: Unexpected character encountered while parsing value: &lt;. Path '', line 4, position 1..SourceMap http://localhost:40288/app.config.js.map read failed: Unexpected character encountered while parsing value: &lt;. Path '', line 4, position 1..
  
  Exception was thrown at line 1247, column 4 in eval code
  0x800a139e - JavaScript runtime error: SyntaxError
  Exception was thrown at line 1265, column 4 in eval code
  0x800a139e - JavaScript runtime error: SyntaxError
  </code></pre>
  
  <p>This seems to be an infinite loop until memory runs out. But if I remove the app name from <code>&lt;base href="/myAppName/"&gt;</code>, it seems to work fine, but then breaks on the server.</p>
  
  <p>Any ideas where the problem is here? Why are solutions only working on one side, development or deployed, and how can we fix that?</p>