CODEWITHSUNDEEP
angulartomcat8angular-cli
aorfevre
aorfevre

Reputation: 5064

Deploy Angular2 App to Tomcat8 - Routing does not seems to work

I'm facing a strange issue trying to deploy my Angular2 app to tomcat8.

First of all the context : - I use Angular Cli to assit my build process. - The apps runs perfectly locally with the server : ng serve - ng build makes my dist/ dir with all prod ressources - I created a gulp task to create a WAR in order to deploy properly the app to Tomcat. - the war is deployed to tomcat webapps directoy

My app URI is like that : https:\www.myexample.com\myapp\

Home uri is working perfectly; The problem starts when trying to use Angular2 routing; for instance https:\www.myexample.com\myapp\myroute.

Tomcats thinks that it is a new webapp dir and does not makes any forwarding do https:\www.myexample.com\myapp\index.html

I have seen several post speaking about this kind of behaviour but so far; I haven't seen any solutions.

does anyone has a clue / idea how I can overcome this issue to run properly my angular2 app on tomcat8 ?

Thanks for support.

Upvotes: 5

Views: 1370

Answers (3)

Nithin Kumar Biliya
Nithin Kumar Biliya

Reputation: 3011

Angular (2+) supports two types of Routing Strategies – HashLocationStrategy and PathLocationStrategy. PathLocationStrategy is the default configuration when you build an application using the angular CLI. PathLocationStrategy is having lot of advantages over the HashLocationStrategy and is the recommended configuration which is discussed in the docs here.

The drawback of PathLocationStrategy is that it needs specific configuration to be done at the server side. If this configuration is not done at the server end, then it leads to 404 when deep links are accessed directly. Also this configuration depends on which server is being used.

For fixing the deep link issue when deploying angular application (with PathLocationStrategy routing) on apache tomcat server (8, 9) -

  1. Configure the RewriteValve in server.xml
  2. Write the rewrite rule in rewrite.config

server.xml -

...
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

...
      </Host>
...

rewrite.config - (note - /hello/ is the context path of the angular app on tomcat)

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/hello/(.*) /hello/index.html

I have documented this issue in my article - Fixing deep linking issue – Deploying angular application on Tomcat server

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

Adding RouterModule.forRoot(useHash: true) switches to URLs using # which works with every server.

To use HTML5 pushState (Angular default) your server needs to be configured to support it.

For a comparison of both styles see https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles

Upvotes: 3

shusson
shusson

Reputation: 5782

You need to rewrite the urls to serve index.html unless the dir or file exists.

Configure Tomcat to use the rewrite valve https://tomcat.apache.org/tomcat-8.0-doc/rewrite.html

Then add the something like below to the rewrite.config file:

# If dir or asset exists go to it
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# Rewrite all other urls to use index.html
RewriteRule ^ /index.html

Upvotes: 3

Related Questions