How to deploy Angular 8 app in Tomcat Server?

2
votes

I've completed a tutorial on Angular and I want to deploy it in my tomcat server. I use eclipse to trigger my tomcat server which opens in localhost:8080 (I use/only know java for back-end). This angular project has Firebase as back-end, not java. I intend to use java as back-end, hence I need to deploy it in tomcat. YES I have tried all the stuff I found in stack overflow and YouTube. ie,

  1. ng build --prod --aot --base-href=/myapp , putting it in webapps/myapp/<files-from-angular-dist> and tried root/myapp/<files-from-angular-dist> in tomcat.
  2. base href ="." , base href ="./" , base href ="/", and placed in dist folder in root and webapps and it didn't work.
  3. Not using AOT compiler (IDK why I did that).
  4. Putting it in webcontent folder of my dynamic-webapp (an old java project).

What should I do ?

  • Apache Tomcat version - 9.0.22
  • Eclipse Dist - JUNE 2019
  • Angular - 8.2.0 (got from ng version)
3
javaangulartomcat
If You no need SSR You just need a tomcat server to send to user for every not known request like localhost:4200/login file index.html. - Mises
If You use firebase it will be easyer for You to send application on firebase hosting. In firebase hosting server are set to "source": "**", "destination": "/index.html" which means all non known sorce send index.html file. - Mises
I don't know anything about SSR in Angular. Also, how do I redirect all unknown req including 404 to index.html - SPS
I don't plan to use firebase as backend though. I am planning to develop my own back end in java. - SPS
I dont know also how to redirect not known queries to index.html file in tomcat server. Firebase hosting is not really a backend it just manage request to give user necessary files. I dont know are you know that Angular Single Page Application is that you send all files to user and his browser works like backend. That why You can send Angular application to firebase hosting and set up application to send http queries to your backend server to solve the buisnes logic if You dont want to display it to user. Your backend will work like REST service or macro/micro service. - Mises

3 Answers

1
votes

To deploy Angular 8 app in Tomcat, just execute the command below:

ng build --base-href=/app-name

  • 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 /webapps/app-name folder in tomcat directory structure.

Please do note that when command runs successfully, it creates all required files in project-folder/dist folder.

Also, when you copy the files (or in this case, the folder), make sure that you restart tomcat.

0
votes

This is a typical case of a project where Angular is used as front-end and java as backend. I can suggest you to use Angular application as front-end application which can interact with a java backend as a microservice. It mean you can make rest call from Angular application to java based microservice. You can run the Angular application using the command like npm install followed by npm start provided you should have Node JS installed in the system. It will be better to use yarn command which is better than npm .You do not need to deploy the angular based application into Tomcat, you can develop a java based microservice and you can deploy it in Tomcat. I would suggest to create a microservice using Spring Boot and you can directly run without having Tomcat as separate server. Spring boot provides built in embedded Tomcat container. If you want to combine both Angular with Spring Boot, you can check this link. https://dzone.com/articles/java-8-springboot-angularjs-bootstrap-springdata-j

0
votes

Additionally to @Dino...

  1. As alternative you can configure href in angular.json under architect > build:

     "scripts": [],
 "baseHref": "/app-name/",
 "deployUrl": "/app-name/"

  2. And important is to fix "deep linking issue". It is also mentioned in official angular doc: Server configuration

So uncomment (or add) to the tomcat/conf/server.xml

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

And create file tomcat/conf/Catalina/localhost/rewrite.config with content

    RewriteCond %{REQUEST_PATH} !-f
    RewriteRule ^/app-one/(.*) /app-one/index.html [L]

    RewriteCond %{REQUEST_PATH} !-f
    RewriteRule ^/app-two/(.*) /app-two/index.html [L]