How can I serve Angular 4 localhost to ngrok?

Question

I would like to use ngrok to make my local development available to external apis that need to use webhooks with it but when I run ngrok on port 4200, Angular gives me Invalid Host Header when I try to access the site from the ngrok link. Does anyone know how I can access an angular ng serve from outside localhost with ngrok?

Thanks

score 28 · Accepted Answer · answered Sep 15 '17 at 08:30

28

I managed to get past the invalid host header, if you do ng serve --disable-host-check you won't get that error and it should run in ngrok.

edit: I've been trying to use ngrok for a remote selenium grid but can't get that to work if anyone has any ideas let me know

answered Sep 15 '17 at 08:30

martin8768

565
5
20

2

I ran ngrok: "ngrok http 4200" then in another shell run "ng serve --disable-host-check" as you stated and now you can access the ngrok web url. thanks for the pointer – sunnyboy Jul 20 '18 at 19:19

score 22 · Answer 2 · answered Dec 01 '18 at 13:55

22

I tried running the ng serve on prod environment by disabling the host check option and it worked,

Cmd1:

ng serve --prod --host 0.0.0.0 --disable-host-check. and tried using ngrok with the following solution

Cmd2:

ngrok http 4200 -host-header="localhost:4200"

answered Dec 01 '18 at 13:55

Sky Pan

431
4
5

Today (05 Sep 2019) this is working: **cmd1** just `ng serve` **cmd2** `ngrok http 4200 -host-header="localhost:4200"` (websockets working well, too, with this config) – J Rui Pinto Sep 05 '19 at 11:56

score 6 · Answer 3 · answered May 04 '20 at 05:09

6

This works with single line code:

ngrok http 4200 -host-header="localhost:4200"

answered May 04 '20 at 05:09

Diego Santa Cruz Mendezú

4,325
39
27

score 0 · Answer 4 · answered Jul 08 '20 at 14:50

0

It's working, but it throw error Invalid Host/Origin header + [WDS] Disconnected! in console...

answered Jul 08 '20 at 14:50

Kubadev

867
10
25

score 0 · Answer 5 · answered Jun 10 '21 at 08:16

Small reminder, an issue I was facing myself. For me, the solution of Diego Santa Cruz Mendezú worked. But it only worked for me in my Google Chrome 'Incognito' browser because then all my extensions are disabled! Just a reminder that a console error can also be an extension error and therefore the site might not show up (correctly), which was the case at my side.

How can I serve Angular 4 localhost to ngrok?

5 Answers5