Angular2 Routing in Apache Tomcat not working with redirect

Question

I am working with Angular2 and an Apache Tomcat 8. When opening my website with the root url it works and clicking buttons redirects to the specific urls. But when manually opening a specific url or reloading the webpage it gives me a 404.

I found this solution: Angular 2.0 router not working on reloading the browser but there is no explanation how to solve it with a tomcat.

I tried this in the web.xml of tomcat8:

  <servlet>
    <servlet-name>html-mapping</servlet-name>
    <jsp-file>/index.html</jsp-file>
  </servlet>

  <servlet-mapping>
    <servlet-name>html-mapping</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>

Then I have no 404 anymore (it loads all files like the main.bundle.js) but only the Angular2 "Loading..." text is shown and it does not continue to open the WebApp.

Answer 1

Just solved this issue on a project. All that is needed here would be to create a very simple servlet and provide that servlet with the mapping you need to allow bookmarking/refreshing on. From here your servlet does nothing but:

request.getRequestDispatcher("/index.html").forward(request, response);

That should take care of it.

Answer 2

I had a similar problem. The reason is that the virtual URLs used in Angular routing are treated as files by Tomcat, hence the 404 when the file doesn't exist. I solved it with URL rewriting.

Answer 3

I have had this problem and I tried many options to solve it without really getting a clean solution I wanted. I wanted to serve my index.html file without a template engine. But when I did I kept getting the 404 when I refreshed. The reasons is because the application is not tracking your paths correctly. Well it is doing it correctly but not the way you want.

For me my solution was npm install hbs. Using handlebars as a template engine aloud me to create one index.hbs page then hand the app off to angular2. I only use it for that one page and for whatever reason that gives me the functionality I want for refreshing without getting the 404.

If you want to take that route just add it to the app.js and create a new index.hbs file. Then add it to the template engine like this,

// view engine setup
app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'hbs');

The other route is to use the HashBang method, You can see information about that at this answer here,

I do not like that route because it adds hashtags to the url which causes other annoying problems. I found the most clean method to just use handlebars. Basically you just have to change your current index.html file to .hbs and then add it to your app.js file as the app engine. Just make sure your path it correctly so it knows where to find it.

Answer 4

Tomcat has a built-in solution for this.

This should work for any single-page-app framework that has UI-routing like Angular, React, ExtJS, etc.

---

In a nutshell:

1) Add a RewriteValve to webapps/{your-web-app-directory}/META-INF/context.xml

<?xml version="1.0" encoding="UTF-8"?>
<Context>  
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
  ... your other context items
</Context>

2) Add rewrite rules for all routes at /webapps/{your-web-app-directory}/WEB-INF/rewrite.config

For example if you have UI routes for "user", "home" and "contact" defined in your Angular app:

RewriteRule ^/user(.*)$    /index.html [L]
RewriteRule ^/home(.*)$    /index.html [L]
RewriteRule ^/contact(.*)$ /index.html [L]

These simple rules tell Tomcat to send all requests with these three named paths straight to index.html.

But the rules can get much fancier, like sending all requests to index.html except a certain path e.g. for /api calls that have to go somewhere else. The linked text above covers all the details.