Angular 5 App throws HTTP Error 404.0 - Not Found after being authorized by IdengtityServer 4

Question

I have and Angular 5 app (pure html-ts app) which redirects to IdentityServer 4 MVC site for login. On successful login, page is being redirected back to angular app index page with id_token in the URL. Index page has the dashboard view.

Everything works fine locally when I run on VS Code.

Problem occurs only when deployed to IIS. On successful login, it's returning back to index page but throws HTTP Error 404.0 - Not Found The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

I have tried setting baseurl, maxQueryStringValue in IIS and everything that I could find on internet. This just doesn't want to work :(

Been trying to fix this for last 2 days no luck.

Answer 1

To make routing work in Angular app on IIS, You need to add below in Web.config.

Create a Web.config file in application folder. Add below in Web.config

<configuration>
  <system.webServer>
    <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" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Hope this helps.