I use Angular's Routing functionality in my Angular 6.0.5 app. Hence, I have paths in my app like:
http://localhost:8080/areahttp://localhost:8080/barnhttp://localhost:8080/towerRunning my app using ng serve works well. I can directly type an address like http://localhost:8080/barn into the browser and it will load the app and go to the appropriate place within the app.
After building the app I copy the entire content of /dist/ into a Java WebApplication, that results in a WAR after compilation.
To build it I use ng build --prod --build-optimizer --base-href=/myappdir/
When I run the WAR in an application server like Wildfly I can successfully go the the URL http://localhost:8080/myappdir/ and load the app. Clicking some routing button within the app also successfully changes the URL to i.e. http://localhost:8080/barn, but if I type the URL http://localhost:8080/barn into the browser myself and then hit enter, I get an error, that the page could not be loaded.
If I run an Angular app which makes use of Angular's routing functionality on a web server like Nginx, I have to tell the web server to point to the index.html file even if the URL requests a different file. So with Nginx this would be done with configuration like this: try_files $uri $uri/ =404;. So I guess the problem is the same within the WAR file.
What must I configure within the WAR file to have it point to the index.html file?
Ok, I found it out myself. So, in case someone is trying the same as I do, here is the description to solve this matter without making tweaks within the web server.
Add a 404 error page to the web.xml inside of the Java project. The following four lines will do the trick:
<web-app ...>
...
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>