如何在我的Windows桌面上运行本地主机的移动设备上运行我的Angular站点

Question

我从超级用户站点上的问题和答案中知道，在桌面上的本地主机上运行，在Android设备上无法访问(PS：这个问题在链接中的问题中继续(，该命令ng serve打开一个配置错误的网络服务器。

问题是如何在不部署我的网站的情况下在 Android 设备上运行我的网站。我将尝试使用此 url http://192.168.0.168:4200使用 Angular-CLI 运行该站点。

Answer 1

尝试ng

serve --host选项，如本期所述：Intellix的 https://github.com/angular/angular-cli/issues/1793 评论。

1. ng serve --host 0.0.0.0
2. 按照此操作查找您的本地 IP 地址
3. 从同一网络上的任何设备导航到<local IP adress>:4200。

注意：如果您得到CONNECTION_REFUSED只需禁用防火墙，您应该很高兴。

否则，请尝试 https://ngrok.com/打开从本地网络到计算机本地主机的隧道。基本上，您的计算机将4200端口转发到网络上任何设备都可以访问的外部IP和端口。

Answer 2

1. 首先验证您的计算机 IP 地址。

   • 在 Windows 上，在提示(复制 IPv4(中键入 ipconfig。
   • 在 Mac 上，在"终端"(复制 inet(中键入 ifconfig |grep inet。

   
   就我而言，这192.168.0.10.

2. 接下来，键入 ng serve --host 192.168.0.10 。

3. 好的，您的应用程序在同一网络上的所有设备上播出。

4. 现在只有http://192.168.0.10:4200/会起作用，localhost不会更多。

Answer 3

当我尝试使用

ng serve --host local_ip_address

我面对

无效的标头请求

此问题已使用 --disable-host-check

ng serve --host local_ip_address --disable-host-check

Answer 4

作为上述所有答案的补充，您可能需要调整设备上的代理设置。对于我的安卓手机，这是：

1. 设置
2. 无线上网
3. 长按您想要的网络
4. 修改网络
5. 单击高级/扩展选项
6. 设置proxyHostname: localhost和proxyPort: 4200和bypassProxyFor: hostIpAddress

Answer 5

我使用 Chrome Remote Device 在移动设备上打开我的 Angular2 应用程序。

您只需要将手机连接到PC并将其与chrome同步即可。然后按照上述链接中所述进行端口转发。

连接设备后，运行 Angular 应用服务ng serve --public-host

现在，您可以从移动设备访问本地主机：4200中的应用程序。

Answer 6

对于 Ubuntu 人：获取在终端中写入此内容的 IP 地址： hostname -I

您将获得一个类似192.168.0.0

然后，您可以为应用程序提供： ng serve --host ip_address

然后，您可以使用以下方法在手机中打开浏览器： http://ip_address:4200