Скачать или смотреть How to Fix 404 Not Found Error on Refreshing Routes in Angular Applications

Discover effective solutions to resolve the `404 Not Found` error in Angular applications when refreshing or directly accessing routes.
---
This video is based on the question https://stackoverflow.com/q/64484470/ asked by the user 'Bilal Dekar' ( https://stackoverflow.com/u/5711367/ ) and on the answer https://stackoverflow.com/a/69604215/ provided by the user 'Bilal Dekar' ( https://stackoverflow.com/u/5711367/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Route in Angular throws 404 resource not available when refreshed

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Fix 404 Not Found Error on Refreshing Routes in Angular Applications

When you're building a web application with Angular and deploy it using a server like Tomcat, you might encounter a frustrating issue: the 404 Not Found error when trying to refresh a specific route or access it directly from the browser. If you've experienced this problem while navigating to a route such as http://localhost:8083/myapp/home, you're not alone. In this guide, we'll break down the causes of this issue and provide a clear solution to help you get back on track.

Understanding the Issue

In Angular applications, routing is typically handled on the client side using the Angular Router. When you navigate between routes using Angular's built-in navigation methods (routerLink for example), it functions smoothly. However, when you attempt to refresh the page or directly enter the URL in your browser, the server (in this case, Tomcat) attempts to fetch that resource directly from the filesystem. Since this specific route does not correspond to a physical path on the server (because Angular handles routing internally), the server cannot find the resource, resulting in a HTTP Status 404 error.

Example Scenario

Working URL: http://localhost:8083/myapp/home (successfully accessed via a routerLink)

Problematic URL: Refreshing the same URL or accessing it directly results in:

[[See Video to Reveal this Text or Code Snippet]]

Initial Solution Attempt

After facing the 404 error, you may have attempted to set up basic handling in your Tomcat configuration by redirecting 404 errors to your index.html file:

[[See Video to Reveal this Text or Code Snippet]]

While this removes the 404 error, you may notice that refreshing the page redirects you to the wrong default route instead of staying on your current route (i.e., it takes you back to /myapp instead of retaining /home).

Implementing the Correct Solution

The right fix involves modifying your Angular application's base URL settings.

Step 1: Change the Base Href

Open index.html: Locate your index.html file in the root directory of your Angular application.

Update the Base Href:

Change:

[[See Video to Reveal this Text or Code Snippet]]

To:

[[See Video to Reveal this Text or Code Snippet]]

This adjustment will tell Angular to resolve routes relative to the current directory rather than from the root of the server.

Step 2: Build the Application with Correct Settings

Alternatively, you can specify the base-href directly when building your application:

[[See Video to Reveal this Text or Code Snippet]]

This ensures that your application is built with the correct relative path, further preventing 404 Not Found errors on refresh.

Conclusion

By recognizing the difference in routing behavior between client-side Angular navigation and server-side resource access, you can successfully prevent the 404 Not Found error during refresh actions. Adjusting the base href in your index.html file or specifying it during the build process resolves this issue effectively.

Now, you can refresh your routes without the worry of encountering errors!

Additional Tips

Always test your application in various environments (development, production) after making routing changes.

Keep an eye on browser console logs for more clues if issues persist.

Implement these solutions to streamline your Angular application's routing and enhance user experience!