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

How to run my Angular site on mobile device that is running localhost on my windows desktop

我从超级用户 Site running on localhost on desktop is unreachable on android device (PS: 这个问题和答案中知道这个问题继续link) 命令 ng serve 打开配置错误的网络服务器。

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

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

  1. ng serve --host 0.0.0.0
  2. 通过关注 this
    3. 找到您的本地 IP 地址
  3. 从同一网络上的任何设备导航至 <local IP adress>:4200。

注意：如果您得到 CONNECTION_REFUSED，只需禁用您的防火墙即可。

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

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

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


    在我的例子中是 192.168.0.10。

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

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

  4. 现在只有 http://192.168.0.10:4200/ 可以，localhost 不行。

当我尝试使用

ng serve --host local_ip_address

我正面临着

Invalid header Request

此问题已通过 --disable-host-check

解决

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

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

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

对于 Ubuntu 人： 获取在终端中写入的 ip 地址： hostname -I

你会得到一个类似于 192.168.0.0

的 IP 地址

然后您可以通过以下方式为应用程序提供服务： ng serve --host ip_address

然后您可以使用以下命令在您的手机中打开浏览器： http://ip_address:4200

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

您只需将您的 phone 连接到您的电脑并与 chrome 同步。 比上面 link 中描述的端口转发。

连接您的设备后，运行 您的 Angular 应用程序可使用 ng serve --public-host

现在您可以在 localhost:4200 中从移动设备访问您的应用程序。