The requested URL was not found on this server error in Angular

Reason for the requested URL was not found on this server error

In a Multi-page web application, every time the application needs to display a page it has to send a request to the webserver. You can do that by either typing the URL in the address bar, clicking on the Menu link/ button. Every such action results in a new request being sent to the Web server. For each request, a corresponding page must exist on the server. The server locates that page and returns it back to the client.

But in Angular Apps, the app starts when the main page (index.html) is loaded. Any subsequent requests do not reload the page but only load a part of the page. The requests are not sent to the server but handled by the Angular router at the client-side. You can read more about it from the article Angular bootstrap process

For Example, when you request for example.com the request is sent to the server, which returns the index.html.This will bootstrap the Angular.

Now when you click on example.com/products, the request is not sent to the server but handled at the client-side by the Angular Router. The Router loads the component associated with the products route. The products component may send an HTTP request to fetch the list of products to display. But the request to display the products page is never sent to the server.

What happens when somebody types the example.com/products in the address bar or refreshes the page. Now the request to fetch the products page is sent to the server. Since there is no products page available in the server it returns the The requested URL was not found on this server or 404 error page

Workaround

The workaround to this problem is to instruct the server to load the index.html no matter what. So when the request comes to example.com/products page, the server serves the index.html page. This bootstraps the Angular app and the Angular router is smart enough to read the requested URL and load the products component.

To instruct the server to load the index.html for every request require a configuration change at the Web server level. The configuration settings depend on the server used.

IIS Server

First, install the IIS URL Rewrite module. Copy the following to web.config file to the root of the application.

                              

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
 
  <rewrite>
    <rules>
      <rule name="Angular 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="./index.html" />
      </rule>
    </rules>
  </rewrite>
 
</system.webServer>
</configuration>
 
                            
                        

Apache

Add a rewrite rule to the .htaccess file as shown.

                              
 
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
 
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.htm
                            
                        

Nginx

Add the following try_files rules to the Nginx configuration file to redirect every request to serve index.html

                              

try_files $uri $uri/ /index.html;
                            
                        

References