使用Angular2的Azure IIS路由 - > 404

Question

We have a website on Azure using a REST back-end written in C# and a front-end written in Angular2.

When I click on menus or buttons in the webpages the correct page is opened and the url is changed from <mydomain>/ to for example <mydomain>/client/16 This works fine and if I understand it correctly the Angular2 routing is taking care of this.

But when I'm at this page <mydomain>/client/16 and hit F5 to refresh the browser I get a 404 error: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. Again if I understand it correctly this is handled by the IIS routing.

I've been reading posts about this for days and tried several suggestions, mostly adding rewrite rules to the Web.config but so far nothing worked.

Locally we don't have this issue because we run the back-end within Visual Studio and the front-end in NPM. This makes it very hard to debug and solve.

What should I do to solve this?

Answer 1

On the IIS forum I was pointed to How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

Adding this rule to my Web.config solved my issue:

    <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" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>

I thought I had tried this one before, but apparently not completely ;)