Angular RouterModule in Java WAR

Question

I use Angular's Routing functionality in my Angular 6.0.5 app. Hence, I have paths in my app like:

http://localhost:8080/area
http://localhost:8080/barn
http://localhost:8080/tower

Running 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?

https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml — Vikas, Jun 01 '18 at 16:43
@Vikas Thanks for the three links. The first one I already know, but there I have to make settings to the server directly, and I'd like to avoid that. — Socrates, Jun 01 '18 at 17:58
@Vikas I'd also love to use `@Controller`, but I don't use Spring. I just created a plain and simple Java Web App. — Socrates, Jun 01 '18 at 17:59

score 2 · Accepted Answer · answered Jun 01 '18 at 18:02

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>

score 0 · Answer 2 · answered Nov 02 '18 at 13:38

0

You can use hashes for the routes. This way, you won't break it. In your app.module.ts:

RouterModule.forRoot( yourAppRoutes, { useHash: true });

answered Nov 02 '18 at 13:38

moritz.vieli

1,747
1
14
17

Angular RouterModule in Java WAR

2 Answers2