Deploy angular app in tomcat

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

We have seen a lot of angular app development till this article and used node js as server. However, we should be able to deploy angular app in tomcat and other types of servers. In this tutorial, we will learn how to deploy angular app in tomcat.

 

Deploy Angular App In Tomcat:

What is the need?

As we develop angular apps using node js, some questions may come to our mind

  • Why did we use node js server if we are going to deploy angular app in some other server
  • Why don’t we use tomcat for angular development?
  • If we developed and run apps on node js, then how will it run on tomcat and other servers?
  • How can I deploy angular app on tomcat? (well we will see the solution in a while)

These questions certainly have answers,

  • angular apps need a lot of dependencies, node package manager of node js server helps tremendously in dependency management and compilation of angular apps.
  • Tomcat does not support javascript dependency management or typescript
  • Even though we develop angular apps using typescript, they are ultimately converted into javascript. Hence when we deploy angular app in tomcat, we are actually putting javascript files in it.

Deploy angular app in tomcat:

We will take our angular crud app  (Please take the code from linked tutorial )for reference and simply build and deploy in tomcat.

Go to our app and run below command.

  • ng invokes angular
  • build asks angular to build current app
  • –base-href tells angular to create a reference directory where generated index.html file will be placed. So, in current case, generated files need to be placed in /angular folder in tomcat directory structure.

When command runs successfully, it creates all required files in dist folder as below.

build angular app
build angular app

 

We are ready to deploy angular app in tomcat. Just copy all these files and paste them in /angular folder under /webapps folder in tomcat.

Once copied, fire up the server and visit localhost:8080/angular/index.html and our bikes app should be seen running.

I hope this article helped understand how to deploy angular app in tomcat

 

Share Button

Prasad Kharkar

Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

9 thoughts on “Deploy angular app in tomcat

  • Pingback:Deploy angular apps in production - theJavaGeek

  • February 8, 2018 at 11:55 pm
    Permalink

    when browsing for example / angular / books / 1 error of sale 404 of the tomcat, you have a solution for that?

    Reply
    • April 24, 2018 at 11:21 am
      Permalink

      Open the index.html file, replace the base-href=”/angular/” with base-href=”.” and restart the tomcat and access the url.

      Or

      For each of the script tag, in src tag add “angular/”
      e.g.

      All doing any of the change suggested, refresh the page in browser. Error will be gone.

      Reply
      • June 19, 2018 at 8:20 pm
        Permalink

        It continues to throw error after doing each of the suggestions. Just the home page is ok.

        Reply
  • March 14, 2018 at 7:42 pm
    Permalink

    when browsing it is came just home page we want to entire project

    Reply
  • April 13, 2018 at 4:45 pm
    Permalink

    Routing is throwing 404 and refreshing also

    Reply
    • April 24, 2018 at 11:22 am
      Permalink

      Solution to your problem is already posted above.
      Plz refer.

      Reply
  • September 15, 2018 at 5:33 am
    Permalink

    Hi guys,
    what about the proxy conf. The href base works fine but ajax call to my rest services are not respecting the proxy.conf.json as ng serve would.

    DId you solve this?
    Cheers,
    Tom

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *