AWS EC2 Angular 5 ng serve not connecting via browser

Question

I managed to get my Angular 5 app running on AWS EC2 Ubuntu...

Started standard Ubuntu instance, used PuTTy to shell in, installed node, entered the next 4 "magic lines"...

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile

made my company dir, did a global npm install for @angular/cli, cloned my git, changed dir to project subfolder, did a local npm install for @angular/cli, and then ran npm install for my project. At this point, I was able to run ng serve with no serious errors during any of the above steps! whew!

It showed it was happily running on port 4200. I even checked with netstat -anp | grep 4200 and also with telnet 127.0.0.1 4200. Yep all working.

Then I went into the AWS dashboard, and created a security group for my instance, turning on HTTP and HTTPS with default values, and then adding one custom TCP rule for Port Range 4200 open to Anywhere, and saved. However, when I go to a browser and enter http://xx.xx.xx.xx:4200 (where the x's are the public IP that AWS assigned to my instance), I get a "can’t establish a connection to the server" error.

What am I missing?

Answer 1

First of all, please note that the built-in webserver in ng-cli is not intended to be used in production. I strongly advise you to find a better solution if this is for production.

In order to access the site from other devices/ over the internet, you have to instruct ng-cli to serve it at the correct IP-adress. You can do that by running ng serve --host x.x.x.x.

It will probably work if you enter your servers LAN-IP (depending on your setup). You can find it by running ifconfig.

However, since you are hosting a static website, an alternative solution is to simply host the app on S3. To do that, run ng build --prod and upload the dist-folder to AWS S3. They have a tutorial for that here.

Alternatively, you can use something like Apache or nginx to serve your compiled app from your EC2-instance.