在 localhost 之外访问 Angular 应用程序

当我们在本地开发 Angular 应用程序时，我们通常会使用 ng serve 命令来启动一个本地服务器，并在浏览器中访问 http://localhost:4200 来预览应用程序。但是，如果我们想要在本地网络以外的设备或计算机上访问应用程序怎么办？

准备工作

在开始向外部设备或计算机上提供访问之前，我们需要先进行一些准备工作。

1. 获取本地 IP 地址

首先，我们需要获取本地计算机的 IP 地址。在 Windows 上，打开命令提示符（或 PowerShell）并输入以下命令：

ipconfig

寻找名为 IPv4 地址 或 IPv4 Address 的行，它将显示计算机当前的 IP 地址。在 macOS 上，打开终端并输入以下命令：

ifconfig

寻找名为 inet 或 inet 址 的行，它将显示计算机当前的 IP 地址。

2. 调整防火墙设置

如果计算机的防火墙已启用，则需要放行端口 4200，以便外部设备或计算机可以访问应用程序。在 Windows 上，打开控制面板并选择“Windows Defender 防火墙”，然后选择“允许应用或功能通过 Windows Defender 防火墙”。在 macOS 上，打开“系统偏好设置”并选择“安全性与隐私”，然后选择“防火墙”选项卡，并允许访问端口 4200。

向外部设备或计算机提供访问

一旦完成了准备工作，我们就可以将本地服务器的访问提供给外部设备或计算机了。

1. 启动本地服务器

首先，我们需要使用 ng serve 命令启动本地服务器。在命令提示符或终端中，进入应用程序文件夹并输入以下命令：

ng serve --host 0.0.0.0 --disable-host-check

--host 0.0.0.0 表示服务器将监听任何 IP 地址，并接受来自任何 IP 的请求；--disable-host-check 表示在访问时将不进行 host 检查。

2. 访问应用程序

现在，您可以在外部设备或计算机上使用浏览器访问应用程序。只需在浏览器中输入本地计算机的 IP 地址，并在后面添加端口号 4200，例如 http://192.168.0.100:4200。您应该可以看到应用程序以与在本地计算机上访问时相同的方式加载。

总结

通过进行上述调整，我们可以轻松地在本地网络以外的设备或计算机上访问 Angular 应用程序。请注意，在使用此功能时应注意安全性，并确保准确设置防火墙和其他访问限制。