CODEWITHSUNDEEP
javaangularrouteswarangular-routing
Socrates
Socrates

Reputation: 9584

Angular RouterModule in Java WAR

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

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?

Upvotes: 0

Views: 898

Answers (2)

moritz.vieli
moritz.vieli

Reputation: 1807

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

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

Upvotes: 0

Socrates
Socrates

Reputation: 9584

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>

Upvotes: 2

Related Questions