0

Angular 4 Project We have created dist folder for angular 4 project.

We created .war file of Angular4 dist folder by including WEB-INF folder with web.xml , and deployed the .war file in tomcat and its getting deployed correctly.

But when we refresh in middle of the application on a different url from home page it is showing the white label error. I'm unable able to find a solution for this.

Any one has any idea. on how to fix this issue

189.233.33.22.com/test/customer

PCA
  • 1,677
  • 6
  • 28
  • 45

1 Answers1

1

The issue here is because of the Angular router, and Tomcat. Tomcat is reading the url first and causing a 404, which will be its own white label error/404 page, rather than your Angular entry point.

Simplest solution is to bundle your index.html (although preferably as a .jsp in this situation, so you can add a 200 OK response, rather than the 404*) in your WAR and set-up Tomcats custom 404 page to point to it in your web.xml

<error-page>
    <error-code>404</error-code>
    <location>/index.jsp</location>
</error-page>

That way, Tomcat will direct to your Angular entry point, and Angular routing will do the rest.

*re: 200OK, adding <% response.setStatus(200); %> at the top of the file will allow Tomcat to respond with the correct HTTP response code (as it isn't technically a 404, just be sure to handle 404s correctly in Angular).

prettyfly
  • 2,962
  • 1
  • 25
  • 27
  • its because his base-href is set incorrectly for the page he wants to access – mast3rd3mon Nov 03 '17 at 08:50
  • 1
    I don't see why the downvote here, this is a fairly common problem when deploying Angular webapps as WARs, and this is a common solution. If it's showing a Tomcat white label error page, then its down to Tomcat, not Angular. The base-href is irrelevant as the application is never even hitting Angular. We experienced this exact same issue when deploying a production war to JBoss. The base-href should be a relative path, not an absolute URL. Your method would require a code-change everytime you wanted to change servers. Not very good practice, at all. – prettyfly Nov 03 '17 at 09:07
  • thats why you leave it as `"/"` in the index.html in the project and change it via the cli when you build it. we had the same issue also, and the fix is setting the url correctly – mast3rd3mon Nov 03 '17 at 09:08
  • That's not what you've advised in your comment, you've explicitly advised changing `` to ``. For reference, the following all point to a similar solution to mine: https://github.com/angular/angular/issues/13633 | https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-the-browser | https://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – prettyfly Nov 03 '17 at 09:21
  • i advised that as the project is already built, saves rebuilding to change something that the cli command changes after anyway so it makes sense – mast3rd3mon Nov 03 '17 at 09:23
  • 1
    Irrespective, given how Tomcat works, i'm inclined to disagree in this situation. Once the user has gone to a specific route (from the base) and refreshes, the browser is requesting the index.html from *that route*, so if he went to `/customer/test/foo/bar` the browser will request the index.html from `/customer/test/foo/bar` on the server, but it doesn't exist there. Tomcat has no knowledge that an Angular app exists in another directory, and will 404. If your solution works for him, then happy days, but I can't see how it will. – prettyfly Nov 03 '17 at 09:29
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158144/discussion-between-mast3rd3mon-and-jfly). – mast3rd3mon Nov 03 '17 at 09:33