angular html5mode in tomcat apache 8.5.4 gives 404 on page refresh

Question

I m creating war file using gulp-war and deploy it into tomcat apache server 8.5.4 on my system

it first runs on localhost:8080/projectName/

but

Answer 1

This is example for The global approach :

<?xml version='1.0' encoding='utf-8'?>
<!-- The contents of this file will be loaded for each web application -->
<Context>
    <!-- REWRITE VALVE -->
    <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
    <!-- // -->

    <!-- Speed up context loading -->
    <JarScanner scanClassPath="false" />
    <!-- Default set of monitored resources. If one of these changes, the -->
    <!-- web application will be reloaded.                                 -->
    <WatchedResource>WEB-INF/web.xml</WatchedResource>

    <WatchedResource>${catalina.base}/conf/web.xml</WatchedResource>
</Context>

And Just jave added two most popular extensions to your list:

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

I like reverse approach (comment by ) but prefer to keep it clean and readable.

Answer 2

I found the solution with help of this article

1. add in /opt/tomcat/conf/context.xml

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

2. add rewite.config file in specific project WEB-INF folder with below content such as on /opt/tomcat/webapps/projectName/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]
   

hope it helps someone