14

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!

rtn
  • 2,012
  • 4
  • 21
  • 39
altd
  • 179
  • 1
  • 1
  • 10

5 Answers5

29

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

Balaji B
  • 329
  • 4
  • 9
  • 1
    It works seamlessly. But is there any way so that i would not need to change href value in index.html – Hardik Patel Aug 03 '17 at 10:43
  • 1
    pass it like ng build --base-href=/BaseRef/ – Deepak Goel Nov 11 '17 at 13:02
  • 1
    Any explanations as to why changing the base href works. I want to know why it started working? – Abdullah Khan Mar 26 '18 at 09:00
  • @Balaji, Thanks, but , as you can see on deploying dist folder (build folder) on tomcat server, app runs on http. How to run our app on https ? – Mahi Jul 24 '18 at 04:58
  • @Ahmadmnzr, Please can you check this https://stackoverflow.com/questions/39210467/how-to-get-angular-cli-to-ng-serve-over-https – Balaji B Aug 06 '18 at 07:24
  • Thanks, it is for serving purpose and on server, we need to configure our tomcat. – Mahi Aug 06 '18 at 08:02
  • I have attempted the same steps but I got error msg when page refresh "HTTP Status 404" can someone help me to resolve. – Pramod Jun 25 '19 at 06:34
6

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.

Ahmad Agbaryah
  • 487
  • 5
  • 5
3

Just build it out using any of the build tasks(dev will include some source maps, and don't worry about having node on the server as node is only needed for the development tooling. Then just copy over all the files in the dist folder. Have a look in the index.html and make sure that the references to the various scrips are correct. The only thing the app needs to run is the scrips in the index, no node is needed.

rtn
  • 2,012
  • 4
  • 21
  • 39
  • 1
    Thank you for your answer. I still have the problem ! I used ng build to generate the dist folder, [I checked if all the scripts are in the correct format, just like you told me! I've found no difference and I think it's ok!][1] But on my browser I got the 404 error message : [It cannot find the bundle files!][2] I've used some combinations.. (creating a new folder "test/x.js" ,, changing the path into dist/test/x.js but no result !) Thank you in advance for your help! [1]: https://i.stack.imgur.com/DP3nF.png [2]: https://i.stack.imgur.com/haflx.png – altd Dec 02 '16 at 10:17
3

I've found the solution:

I had to insert the right path to the bundle files!

I changed for example the src attribut of the index file from : src="inline.bundle.js"

to : src="dist/inline.bundle.js"

Just added the DIST FOLDEEEEEER ! Haha Thank you run yards for your help !

altd
  • 179
  • 1
  • 1
  • 10
  • Thanks, but , as you can see on deploying dist folder (build folder) on tomcat server, app runs on http. How to run our app on https ? – Mahi Jul 24 '18 at 04:58
1
  1. Run this command ng build --prod on your terminal
  2. After check one folder is created in parallel of src dist and go to dist folder and go to inside of your project folder and select all files and paste in inside of WebContant and parallel in web-INF and go to inside on index.html page and replace / from . in like href="." and go to url example: http://localhost:8080/ProjectName/#/URL and check it.
iGian
  • 11,023
  • 3
  • 21
  • 36
Bheem Singh
  • 607
  • 7
  • 13