Configure Tomcat 8 with Angular

Question

i'm trying to deploy my angular app on my local apache tomcat 8 server.

I used ng build --prod and copy paste the result of dist here.

Location of my app on server

I put <base href="/caquiweb/"> to my index.html.

So, I can reach my application, and routing works, but 404 when manually changing URL in browser to defined router route.

Working url by using routerLink

404 manually changing from browser

I think that i have to configure my server but i don't really know what to do.

Thanks in advance

Answer 1

Easiest solution from my perspective:

• Add a WEB-INF/web.xml in tomcat/webapps/caquiweb, which has the following contents:

<web-app>
    <error-page>
         <error-code>404</error-code>
         <location>/index.html</location>
     </error-page>
</web-app>

That way Tomcat redirects to index.html every time a URL is not found, which then leads Angular to handle it with the component router.

Answer 2

This issue is because of the PathLocationStrategy routing in angular application.

The context path of your application is /caquiweb/.

You setting in index.html should be - <base href="/">

You have to build the application using - ng build --base-href /caquiweb/

You have to configure the rerouting of deep links to the application root index.html as below -

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 - (location - {tomcatHome}/conf/Catalina/localhost)

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

For detailed instruction you can refer the article - Fixing deep linking issue – Deploying angular application on Tomcat server