How to preview angular app in codeanywhere IDE?

While running angular apps in codeanywhere or cloud9, we can not preview the compiled angular or any other web apps. We're getting blank screen or some error message.

Solution

To preview it, we have to do the following checks

Please Check that your Container is turned on and running
Please ensure that your server(angular) is running and listening on 0.0.0.0 IP address. (If you're listening on 127.0.0.1 (localhost), then it is not available from outside of the Container)
Your server might be running on different port, please check you are using the right port.

And please use this below command to ensure these all above said points are matched to compile angular app.

ng serve --host 0.0.0.0 --port 4201 --disable-host-check

here port number 4201 is of my choice, please feel free to choose your own.

Now the codeanywhere IDE is ready to be viewed outside. And in some cases, you may not get the preview url to view the app in the browser. If so, we've to find the preview url. Let's see how to construct it below:

https://port-4201-containerName-username.preview.codeanywhere.com/

Please replace the below mentioned keyword by your own, according to your IDE

4201 is your port number
containerName is the name of your container(project environment)
username is the codeanywhere username

This is not only for angular and applicable for all the web apps. Angular is an example here.