How to deploy Angular 8 app in Tomcat Server?

user_10847871 0
Viewed 17882

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)
angular tomcat java
3 Answers

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.

user_95186680

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]
user_8716530

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

user_31278120
Related