CODEWITHSUNDEEP
javascriptangularjsiisvisual-studio-2015html5mode
jlembke
jlembke

Reputation: 13517

Angular links breaking on server

We are dealing with a situation similar to these 404 Refresh scenarios 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.

Our solution for the deployed application works by putting the following in the web.config:

<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">

        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="(api)" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />

      </conditions>
      <action type="Rewrite" url="/myAppName/" />
    </rule>
  </rules>
</rewrite>

And then the following change for index.html:

<base href="/myAppName/">

This mostly works great except for links we have built in Angular. For example

<a href="/partDetails/"></a>

The deployed app will not put "myAppName" in the url. Why is this?

The second issue is that in our Visual Studio dev environment the <base href="/myAppName/"> breaks the application. This throws the app into generating an endless string of errors in the output that look like this:

SourceMap http://localhost:40288/app.module.js.map read failed: Unexpected character encountered while parsing value: <. Path '', line 4, position 1..SourceMap http://localhost:40288/app.core.module.js.map read failed: Unexpected character encountered while parsing value: <. Path '', line 4, position 1..SourceMap http://localhost:40288/app.config.js.map read failed: Unexpected character encountered while parsing value: <. 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

This seems to be an infinite loop until memory runs out. But if I remove the app name from <base href="/myAppName/">, it seems to work fine, but then breaks on the server.

Any ideas where the problem is here? Why are solutions only working on one side, development or deployed, and how can we fix that?

Upvotes: 0

Views: 226

Answers (1)

Andrew Morton
Andrew Morton

Reputation: 25013

If you create an absolute URL for the <base> directive, it should work.

For example, with an asp:Literal named "baseLink" in the <head> section:

Option Infer On

Protected Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
    Dim baseUrl = Request.Url.GetLeftPart(UriPartial.Authority) & VirtualPathUtility.ToAbsolute("~/") & "myAppName/"
    baseLink.Text = $"<base href=""{baseUrl}"">"
End Sub

(I just tacked the & "myAppName/" on the end - I'm not at a computer where I can confirm if it should use ....ToAbsolute("~/myAppName/") instead.)

Upvotes: 1

Related Questions