CODEWITHSUNDEEP
angularapachetomcat
Imade
Imade

Reputation: 55

Configure Tomcat 8 with Angular

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

Upvotes: 4

Views: 3587

Answers (3)

Diego Sousa
Diego Sousa

Reputation: 91

You could configure the rewrite in a programmatic way as described in this great post: https://levelup.gitconnected.com/packaging-your-spring-boot-and-angular-2-projects-together-a13a9c5efdb7.

The advantage of this approach is that you don't need to change anything on the server. The unique file you need to change is your deployment descriptor file, in this case your web.xml file, to register you filter. Another advantage is that you could give angular the ability do handling just its routes. So if you try to access a resource, like a file or a endpoint in the server, and this resource doesn't exist, you will get a true 404.

Upvotes: 1

Nithin Kumar Biliya
Nithin Kumar Biliya

Reputation: 3011

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

Upvotes: 1

alcfeoh
alcfeoh

Reputation: 2257

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.

Upvotes: 3

Related Questions