Angularjs 2 project development with angular-cli

javascript
angular

#1

New to cloud9 and trying out my first project using something for a class I’m taking.
This uses the angular-cli and my basic question is, when I run ‘ng serve --host 0.0.0.0 --port 8080’ (as found in other threads), it runs, but what browser and what url do I run this in within the context of cloud9? When run locally, I can simply hit (with default cli settings) http://localhost:4200 , but of course this doesn’t make sense from within the virtual dev environment, unless of course there’s a browser running within this vm too which would be interesting…


#2

Okay, figured it out, by using the preview tab.
However, unlike running locally, changes to my code aren’t picked up dynamically and reloaded? Means I have stop and start the server on any change?


#3

Correct. Unless you are running a static HTML/CSS/JS page without a server then you’ll have to reload your own.


#4

https ://community.c9.io/t/anyone-using-c9-to-do-the-angular2-project/7078/12?u=developeralex


#5

i cant run app using angular2 cli, getting “Invalid Host header” error.


#6

I followed the steps , everythings seems to be good but when I tried running my app using preview button, im getting "Invalid Host header " and url show on c9 browser is https://my-workout-prfpp.c9users.io/localhost:8080
any help is appreciated.


#7

Yes, that’s due to a recent change in security for Webpack dev server that Ng uses. You now have to specify --host <workspace>-<username>.c9users.io, and add an entry 0.0.0.0 <workspace>-<username>.c9users.io to /etc/hosts. If you reload the workspace, it may migrate to a different host and then you need to add that entry again.

I believe they are working on a fix: https://github.com/angular/angular-cli/issues/6070 to enable --public option for Webpack dev server.

Btw, the url should be simply https://<workspace>-<username>.c9users.io:8080 (and you can remove the :8080 part if browsed from IDE tab).


#8

Thanks dinvlad for quick response. I ma still getting this error

“Provided host workspace-prfpp.c9users.io could NOT be bound. Please provide a different host address or hostname”

when i fire command prfpp:~/workspace/my-app (master) $ ng serve --host workspace-prfpp.c9users.io


#9

also , looks like I dont have write access to add host entry in /etc/hosts.


#10

Hi, i am getting the same message, could you fix that?

-Thank you.


#11

You can now use

ng serve -p 8080 -H 0.0.0.0 --public-host ${HOST}

where HOST=<your_c9_project_name>-<your_c9_user_name>.c9users.io


Preview just gave up the ghost
#12

Thank you very much, this worked for me.


#13

No problem, here’s the relevant discussion on GIthub: https://github.com/angular/angular-cli/issues/6070


#14

Huh, so I had made no changes to my workspace (didn’t upgrade any modules, etc.) but one day it was working fine without this host addition, the next it wasn’t. Curious how that can be?


#15

so this issue (starting servers in frameworks running on this service) has become one of the most problematic and difficult issues I’ve dealt with on cloud9. This one I thought I had figured out, had an alias macro defined for it and didn’t have to worry about it… and now apparently have to go back and rejigger it to fix it.

It would be very nice if cloud9 could provide some sort of wrapper/macro library that would do this for some of the more popular frameworks and take the guesswork out of the clients hands. This is making the choice of using a remote system like this (which I was hoping to be convenient and portable) vs. a local setup a lot less enticing.


#16

This worked for me 31-1-2018