How do I deploy an angular2 app on a local tomcat server?

3
votes

I have been developing an angular2 app with the lite server. Now I would like to deploy this app on a tomcat server to connect with a java backend. I have been using angular cli. I have used the command 'ng build -prod' to generate the dist folder. According to the udemy tutorial on angular2, the contents of this folder are all that is required to deploy an angular2 project. I place the contents of this folder in the WebContent folder of the java project, and click the green button in the eclipse IDE to start serving the files. In other projects I can successfully deploy html and javscript files in this way. But for this angular2 project "Loading..." appears and the app never starts. The console shows these errors.

GET http://localhost:8080/vendor/es6-shim/es6-shim.js [HTTP/1.1 404 Not Found 3ms] GET http://localhost:8080/vendor/reflect-metadata/Reflect.js [HTTP/1.1 404 Not Found 4ms] GET http://localhost:8080/vendor/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 4ms] GET http://localhost:8080/vendor/zone.js/dist/zone.js [HTTP/1.1 404 Not Found 4ms] GET http://localhost:8080/vendor/reflect-metadata/Reflect.js [HTTP/1.1 404 Not Found 1ms] GET http://localhost:8080/vendor/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 2ms] GET http://localhost:8080/vendor/zone.js/dist/zone.js [HTTP/1.1 404 Not Found 2ms] ReferenceError: System is not defined

These errors seem wierd to me because I see the files exactly in these locations.

When I run ng serve in the angular2 cli project folder, the app runs fine.

How can I deploy the dist folder in a tomcat server without running the light server, or is the light server maybe required to run at the same time? What is the best way to do this?

2
tomcatangular
Not sure what the problem is with eclipse, but I do the same thing in intellij15, and the app works nicely. – Dan
I had done it with Netbeans 8.2 and it works very well on Built in Tomcat and external. You should set the om deploy parameter – Pini Cheyni

2 Answers

8
votes

I'm running a little script to build the project and then copy it to tomcat. I'm telling angular what the base directory is that it will run under in tomcat. 

#!/bin/sh
ng build --base-href /angular/ --prod
mkdir -p /home/xxx/apache-tomcat-8.0.37/webapps/angular
cp -R /home/xxx/angular-clitest/dist/* /home/xxx/apache-tomcat-8.0.37/webapps/angular/

Once thats run, start tomcat and you can access it at: http://localhost:8080/angular

0
votes

Generate the dist folder using ng build --environment=prod and copy the dist folder contents into tomcat /opt/tomcat/webapps/ROOT/ folder.

When we hit the http://localhost:8080/ in the browser then automatically index.html file will be loaded.

Thanks