Angular and Page Refresh with Lighttpd

This article stems from a problem I encountered while using Angular for front-end application development. I noticed that often the configurations of application servers do not allow the refresh of non-root pages (e.g., refreshing the page myappangular.it works fine, but refreshing myappangular.it/dashboard results in a 404 error).

To overcome this problem, there are two solutions:

1. Restore hash routing - in full AngularJS style;
2. Modify the web server configurations.

Since I don't like method 1), in this article I will discuss server-side configurations, specifically for Lighttpd.

Angular and Server-Side Configurations for Lighttpd

The Angular guide on server-side configurations is available at this address: https://angular.io/guide/deployment and is very simple and precise.

However, the guide talks about the major application servers (Apache, Nginx, IIS...) but not about Lighttpd.

Since many servers I use have Lighttpd installed, I had to find a solution, which in reality was very simple.

In addition to the basic configuration:

server.modules = (
    "mod_access",
    "mod_alias",
    "mod_accesslog",
    "mod_compress",
    "mod_redirect",
    "mod_rewrite",
)

It was enough to add this simple line to the configurations:

url.rewrite-if-not-file = ( "(.*)" => "/index.html/$0" )

This specific configuration works for installations in the root of the domain. If, instead, the application is located in an internal folder (e.g.: mysite.it/angular), a configuration similar to the following will be needed:

url.rewrite-if-not-file = ( "/myfolder/(.*)" => "/myfolder/index.php/$0" )

Once this is done, simply restart the Lighttpd daemon, and that's it!