Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I deploy an Angular 2 application on tomcat server (Windows Server 2012)

I'm new in AngularJS 2 framework and I'm stuck!

I want to deploy an application (quickstart for example) on a Windows Server 2012. I have already installed Apache tomcat on it. What I did : I used the command npm build (with and without "-prod") in order to generate the dist folder (output : index.html & the bundle files) then I putted it into 'webapps' folder in tomcat, then I tried to reach the page using my browser, the index page is showing me "Loading..."! I think that angular is not working...

I tried to install NodeJs on the server then generate a simple project (npm install -g angular-cli) and run it on the server.. it works on the localhost (server) but on my machine using "IP_of_sv:Port" Chrome gives me an error "ERR_CONNECTION_REFUSED"!

Can you help me please with simple explanations please?

Thank you in advance!

like image 969
altd Avatar asked Nov 28 '16 20:11

altd


People also ask

Can I deploy angular in Tomcat?

To deploy an angular application in tomcat we need to build the application using the ng tool. For this demo, I am going to build a simple default angular application using below command. To create an angular application run the following command in command prompt as shown below.

Can we deploy angular app in Apache server?

Installed dependencies using npm install . Used ng build --prod command and it created a dist directory. Changed apache root to /var/www/html/dist directory. Enabled mod_rewrite , restarted apache and added this .


2 Answers

If your are using angular-cli command to create angular 2 project.Then cli has given some commands to deploy your application into production. Use command like ng build --prod on your project directory and it will generate dist folder in your directory.enter image description here

Go to inside dist folder and change the base href like href="." in index.html. After that copy dist folder in your tomcat root directory and run the server.enter image description here. you can see below screen shot our application running on tomcat server. enter image description here

like image 145
Balaji B Avatar answered Sep 28 '22 01:09

Balaji B


You can change one place in the index.html: <base href="/">
Make the base href to be your relative path form webapps folder in tomcat to the folder that includes the index.html of your angular app.

In your case, change it to: <base href="./dist">
No other changes are needed.

like image 35
Ahmad Agbaryah Avatar answered Sep 28 '22 03:09

Ahmad Agbaryah