Angular first site visits the non-root path works locally, but not in production

Question

In my Angular 4 application, if I enter the root path in the URL the first time I visit the site (i.e. localhost:4200/projects), my application loads and the corresponding component is displayed on the screen in the browser.

However, as soon as I serve the site through IIS, if I go to http://<my-domain>.com/projects, I get a 404 error (not from my application) and the application never loads.

How do I access the root path as the first visit to the production site to find out that the application is an Angular application and downloads the application for any path that is root or higher?

Answer 1

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

In the deployed version of your application, the web server on which it runs knows only how to service one html file that it sees (index.html), which corresponds to your root path. The second one you are trying to access directly is http: // url-to-your-app / art , for example, the server will call 404 not found, because it does not recognize that it can serve as a resource path.

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>

This means that IIS should respond with your index.html when 404 is detected.

URL-, , , , , .