404 Not Found Error message upon refreshing an internal Angular Page after deploying it to the Server

After building your Angular 14+ application, when you deploy it on any Node JS or Apache/XAMPP or IIS or any other server, it will work normally on the base url. You should further navigate and browse inside the application without any problem. When you try to refresh it from any internal url, it may suddenly give you an 404 not found error. If you go back to root/base url and come back to that path where you got 404 error, it will work properly. But if you refresh from there, it may break.

You may not understand what is the problem at that time. When you come from base/root url, it works normally, but upon refresh you are getting 404 error message. Is it Angular or Angular’s routing or Server problem.

To understand that, we need to understand how the Angular Application and any Server works.

Why we get 404 Not Found Error message with Deployed Angular Application

Suppose you uploaded all your built Angular application files to the root folder of your server, and for example the url is https://howtojs.io. Now when you run the application at this url, the server (Node JS or Apache or other ) first tries to find index.html file. And since we got an index.html file with our built and uploaded to the base folder,the server finds that file and runs it and our application starts running without any problem.

From now onward, since Angular is a Single Page Application, when you navigate inside the application, the application never gets refreshed(as long as you coded Angular way), means the entire page do not get reloaded, which again means a request do not go to the server and Angular (inside the browser) takes care of handling all paths.

Now, suppose you try to load the application at https://howtojs.io/angular, then Apache or Node JS or any other server by default thinks that, there will be a folder named angular inside base/root folder and that folder further contains an index.html (or any other indexing file for that matter such as index.php) file. Since neither the folder nor any file inside that are present, we get 404 not found error.

On Apache / XAMPP Server:

 

On Node JS Server

 

To check this, you can manually create a folder named angular and place any dummy index.html file inside that and then refresh from that url.

I created a folder named user and placed an index.html file inside that with a simple string hii on Apache server, then we get

With the same folder and index.html in Node JS Server

 

This scenario is not only with Apache or Node JS server, it may occur on any other server which looks for a folder or an indexing file unless you address the issue by directing the requests to the appropriate file, for angular applications, the root index.html file.

How to Solve 404 Not Found Error On Refresh with Deployed Angular 14+ Application on Node JS, Apache / XAMPP or any other server

An Angular application needs to run the index.html file first to handle any url inside the application. So, the solution is to make the index.html run first when you enter into the application from any path

Solution for 404 Not Found Error on Refresh with Deployed Angular 13+ Application on Apache/XAMPP server

Solution 1:

We can create an .htaccess file inside the deployed application folder and redirect all the links (routes) to index.html. The below code is a sample code, and make sure that you change it as per your applications exact requirement.

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews -Indexes
</IfModule>

RewriteEngine On


RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]


RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]

One common mistake that may happen when you create a .htaccess file is, .htaccess is the file extension. In your system, if your file extensions are hidden, you may accidentally create a file such as .htaccess.txt. Since the file extensions are hidden the file may look like an htaccess file, but it will be a text file. So make sure that you are creating a file with correct extension.

Solution for 404 Not Found Error on Refresh with Deployed Angular 13+ Application on Node JS Server

The solution on Node JS is also same. We need to re-direct all the requests to the base index.html file. We can achieve this by using express js.

Sample code to solve Angular’s 404 not found errors on Node JS (in the sample code below, we kept built Angular application files inside howtojs folder which is inside dist folder)

const express = require('express');
const app = express();

app.use('/', express.static(__dirname + '/dist/howtojs/'));

app.use('*', function (req, res, next) {
    res.sendFile('index.html', { root: __dirname + '/dist/howtojs/' });
});

app.listen(3200);

Again make sure that you edit the code above to match your application requirements.

 

Solution for 404 not found errors with Angular Application with Hash Location Strategy

Another way to solve the 404 error messages on deployed Angular application is to use Hash Location Strategy. With this method, there is no need to configure anything other server side. But the downside of this approach is, your urls will now contain a hash(#) symbol inside it and can be considered as ugly, unless, you want these types of urls intentionally. This approach was also used to be considered as, not the best practice for Search Engine Optimization (SEO).

To implement this strategy, first import LocationStrategy and HashLocationStrategy from angular common

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

then add them to providers array in app module like this

 providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],