July 10, 2025 07:49 by
PeterA common technique for improving performance in large Angular apps is lazy loading. The practice of loading a module only after the user has reached its route is known as lazy loading. This reduces the initial load time of the application. In one of our projects, we had a dashboard module that was loaded slowly. The module worked flawlessly when the app was being used. However, when the user reloaded the browser while on the dashboard route (http://localhost:4200/dashboard), a blank page or 404 error was shown.
Causes of the Issue
Client-side angular routing is used. When you hit refresh, the browser asks the server to fetch that route, but the server is not aware of this.
How Did We Fix It?
We fixed that by instructing the server to divert all requests to index.html so that Angular could handle the routing. In this case, we changed the.htaccess file with the following since we were using an Apache server:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
There is no issue if you use the built-in dev server in Angular CLI, as it takes care of this already. However, the hosting server needs to know for production.
Conclusion
App performance is enhanced by lazy loading, but if the server is not set up correctly, it may result in unforeseen problems. To allow Angular to handle routing, always ensure that your server reroutes unknown routes to index.html.