Setting up Angular deep linking on IIS

Question

I'm trying to configure an Angular/ASP.NET 5 application on IIS to support deep linking, so that a URL such as domain.com/article/title-slug works

I've added the following code to my web.config using the IIS rewrite module:

<rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="wwwroot/index.html" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>

My problem is that my site no longer loads, I have a blank screen with nothing in the network tab and no source.

My inetpub\site\ folder is the root of the dotnet core publish folder, and I have the angular build assets within inetput\site\wwwroot

My base href is = "/" and everything works fine without the rewrite code.

Finally, I tried changing my rewrite URL to

<action type="Rewrite" url="/index.html" appendQueryString="true" />

But then I start getting the error:

inline.f137c7f1f4e2a52a2fb9.bundle.js:1 Uncaught SyntaxError: Unexpected token <
polyfills.25e42e2a7a0746e9ff75.bundle.js:1 Uncaught SyntaxError: Unexpected token <
main.0d9f8e7be2ccd1472551.bundle.js:1 Uncaught SyntaxError: Unexpected token <

Answer 1

I ended up fixing this by scrapping the URL rewrite module and handling this in code:

        app.Run(async (context) =>
       {
           context.Response.ContentType = "text/html";
           await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
       });