Tag Archives: debian

Fixing angular 404 page not found error on page refresh

3 Replies

By default, navigation within an Angular application relies on PathLocationStrategy, which uses HTML5 history.pushState, a technique that changes a browser’s location and history without sending an HTTP request to the server. This is sweet because your application behaves like any web site, while being way more reactive since it skips the browser/server communications.

However, there’s one major drawback, if you refresh your page after visiting an Angular deep link, or if you access it using your favourites or history, your browser will send the request to the server, which will have no hint about the requested resource, and will return a 404 error.

To prevent this, you need to set some server side configuration, which will depend on your web server. Here are the solutions for Apache and Tomcat, on a Debian 10.

Apache

The easiest way is to include a .htaccess, in your Angular application, and to enable Apache rewrite mod

1. Install Apache rewrite mod

sudo a2enmod rewrite
sudo systemctl restart apache

Then add .htaccess in your Angular app folder:

RewriteEngine On
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
 RewriteRule ^ - [L]
 RewriteRule ^ /myAngularAppBase

If you ship the .htaccess with your app, don’t forget to include it in the assets section of your angular.json file

{
...
"assets": [
              "src/.htaccess",
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
...
}

Tomcat

1. enable the rewrite valve in /opt/tomcat/conf/context.xml

 <!-- REWRITE VALVE -->  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />  <!-- // -->

2. add rewrite.config file in the project WEB-INF folder with below content such as on /opt/tomcat/webapps/myProject/WEB-INF/rewrite.config.

RewriteCond %{REQUEST_URI} !^.*\.(bmp|css|gif|htc|html?|ico|jpe?g|js|pdf|png|swf|txt|xml|svg|eot|woff|woff2|ttf|map)$ RewriteRule ^(.*)$ /index.html [L]

If you ship it with your Angular app, don’t forget to add WEB-INF folder to your angular.json assets section.

{
...
"assets": [
              "src/WEB-INF",
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
...
}

Apache as a reverse proxy for Tomcat on Debian 10

Leave a reply

Here’s the situation: you have an Angular application that you want to host on apache, and a Spring Boot application running with its embedded tomcat, or that you want t o deploy on tomcat. However, you don’t want to expose your tomcat default 8080 or 8443 ports.

The solution is to use Apache a reverse proxy for tomcat. Only the apache standard http and https ports will be exposed, and you only need to deal with https certificates at the apache level.

To achieve this :

1. Enable the apache proxy mod 

a2enmod proxy
a2enmod proxy_http
systemctl restart apache2

2. Configure apache as a proxy

Edit /etc/apache2/sites-enabled/default-ssl.conf

In the following examples, all traffic to /api will be redirected to the localhost tomcat /api endpoint.

If your tomcat server uses https, then you must enable Apache as a https proxy, and mostlikely disable all https security verification because you will access the tomcat using your localhost ip address, which won’t match the url of the https certifcate :

<VirtualHost *:443>
    ...
    SSLProxyEngine on
    SSLProxyVerify none
    SSLProxyCheckPeerCN off
    SSLProxyCheckPeerName off
    SSLProxyCheckPeerExpire off
    ProxyRequests On
    ProxyPreserveHost On
    ProxyPass /api https://127.0.0.1:8443/api
    ProxyPassReverse /api https://127.0.0.1:8443/api
 
    <Location "/api">
        Order allow,deny
        Allow from all
    </Location>
    ...
</VirtualHost>

If your tomcat is using plain old http, and not https, then a simpler configuration will be enough :

<VirtualHost *:443>
    ...
    ProxyRequests On
    ProxyPreserveHost On
    ProxyPass /api http://127.0.0.1:8080/api
    ProxyPassReverse /api http://127.0.0.1:8080/api
 
    <Location "/api">
        Order allow,deny
        Allow from all
    </Location>
    ...
</VirtualHost>