title: Angular 4 App served through .NET WebAPI - URL gets messed
body: <p>I have an AngularJS app which is currently being served through a custom route in .net WebApi.</p>
  
  <pre><code>    [HttpGet]
      [Route("angularjs")]
      public HttpResponseMessage Get()
      {
          string filePath = HttpContext.Current.Server.MapPath(baseHref + "index.html");
  
          string htmlFile = File.ReadAllText(filePath);
  
          // some more stuff
  
          HttpResponseMessage response = new HttpResponseMessage
          {
              Content = new StringContent(htmlFile)
          };
  
          response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
          return response;
      }
  </code></pre>
  
  <p>The index.html file contains:</p>
  
  <pre><code>&lt;base href="/baseHref/"&gt;
  </code></pre>
  
  <p>Then I enter <a href="http://localhost/angularjs" rel="nofollow noreferrer">http://localhost/angularjs</a> and the app loads fine, the final url is: <a href="http://localhost/angularjs/#/home" rel="nofollow noreferrer">http://localhost/angularjs/#/home</a>, which is what I want.</p>
  
  <p>I'm trying to do the same with Angular 4 but I have a problem with the final URL.</p>
  
  <p>The route is</p>
  
  <pre><code>[HttpGet]
  [Route("angular4")]
  public HttpResponseMessage Get()
  {
      string filePath = HttpContext.Current.Server.MapPath(baseHref4 + "index.html");
  
      string htmlFile = File.ReadAllText(filePath);
  
      // some more stuff
  
      HttpResponseMessage response = new HttpResponseMessage
      {
          Content = new StringContent(htmlFile)
      };
  
      response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
      return response;
  }
  </code></pre>
  
  <p>The index.html file contains:</p>
  
  <pre><code>&lt;base href="/baseHref4/"&gt;
  </code></pre>
  
  <p>Expected: <a href="http://localhost/angular4/#/home" rel="nofollow noreferrer">http://localhost/angular4/#/home</a> (the route response with the injected index.html in the response)</p>
  
  <p>Getting: <a href="http://localhost/baseHref4/#/home" rel="nofollow noreferrer">http://localhost/baseHref4/#/home</a> (the app being redirected after the route resolves)</p>
  
  <p>It seems to be a problem with the Angular 4 app, since if I comment out the angular scripts in the index.html I will just get <a href="http://localhost/angular4/" rel="nofollow noreferrer">http://localhost/angular4/</a> (the injected index.html without loading the app).</p>
  
  <p>Would like some help. Thank you in advance.</p>
  
  <p>EDIT:</p>
  
  <p>Probably something to do with the RouterModule, since if I set <code>initialNavigation: false</code> then it will only set the basehref after I navigate. Is there a way to change this behavior</p>