Angular first site visit non-root path works locally but not in production

Question

In my Angular 4 application, if I type a non-root path into the url as my first visit to the site (i.e. localhost:4200/projects), my application is bootstrapped

Answer 1

See my answer here for a more detailed explanation of why this is happening. A short snippet:

On the deployed version of your app, the web server hosting it knows only how to serve the one html file it sees (index.html), which corresponds to your root path. The second you try to access directly http://url-to-your-app/art for example, the server will throw a 404 not found, as it does not recognize that as the path of a resource it can serve.

For IIS, the easiest way to fix this is to add this to your web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpErrors>   
            <remove statusCode="404" subStatusCode="-1" />                
            <error statusCode="404" path="/index.html" responseMode="ExecuteURL" />                
        </httpErrors>
    </system.webServer>
</configuration>

What this does is instruct IIS to respond with your index.html whenever a 404 is detected.

Another way would be to setup URL rewriting, but that requires the rewriting module to be installed and configured, and it's just too much of a hassle in my opinion compared to the solution above.