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

8 comments for “Deploy angular app in tomcat

  1. Anderson Gomes
    January 30, 2018 at 2:09 am

    Thank you!

  2. Alan
    February 8, 2018 at 11:55 pm

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

    • Datta
      April 24, 2018 at 11:21 am

      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.

      • Pablo
        June 19, 2018 at 8:20 pm

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

  3. mahi
    March 14, 2018 at 7:42 pm

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

  4. Sachin B P
    April 13, 2018 at 4:45 pm

    Routing is throwing 404 and refreshing also

    • Datta
      April 24, 2018 at 11:22 am

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

Leave a Reply

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