如何允许本地主机之外的访问

使用 ng serve --host 0.0.0.0 将允许您使用您的 ip 而不是 localhost 连接到 ng serve。

编辑

在较新版本的 cli 中，您必须提供本地 IP 地址

编辑 2

在较新版本的 cli（我认为是 v5 及更高版本）中，您可以再次使用 0.0.0.0 作为 ip 来托管它，以便您网络上的任何人与之交谈。

作为旁注确保您的连接在您的操作系统设置中设置为公共。

运行命令

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

这将禁用主机检查并允许使用 IP 地址从外部（而不是本地主机）访问

Mac 用户：

转到系统偏好设置 -> 网络 -> Wi-Fi 复制状态下方的 IP 地址（通常为 192.168.1.x） 将其粘贴到您的 ng serve 中，例如：ng serve --host 192.168.1.x

然后您必须能够通过 192.168.1.x:4200 在其他设备上查看您的页面。

您可以使用以下命令使用您的 ip 访问。

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

如果您正在使用 npm 并且希望避免每次都运行该命令，我们可以将以下行添加到脚本部分的 package.json 文件中。

"scripts": {
    ...
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
    ...
}

然后，您可以使用以下命令运行您的应用程序，以便从同一网络中的其他系统访问。

npm start

我只是在我的项目中编辑 angular.json 文件，如下所示

...

    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "project:build",
      "host": "0.0.0.0"
    },
...

https://i.stack.imgur.com/JEhEj.png

无需更改 package.json。

对我来说，它使用：

ng serve --host=0.0.0.0 --port=5999 --disable-host-check

主机：http://localhost:5999/

如果您在 Docker 中遇到同样的问题，那么您可以在 Dockerfile 中使用下面的 CMD。

CMD ["ng", "serve", "--host", "0.0.0.0"]

或者完成 Dockerfile

FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

打开 cmd 并导航到项目位置，即为项目运行 npm install 或 ng serve 的位置。

然后运行命令 - ng serve --host 10.202.32.45，其中 10.202.32.45 是您的 IP 地址。

您将能够在 10.202.32.45:4200 访问您的页面，其中 4200 是您的端口号。

注意：如果您使用此命令提供您的应用程序，那么您将无法访问 localhost:4200

一个可能对某人有帮助的快速解决方案：

在您的 package.json 中添加此行作为 start ng serve --host 0.0.0.0 --disable-host-check 的值

前任：

{
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",
}

然后只需执行 start 或 npm run start

您将能够从其他本地 IP 访问您的项目。

ng serve --host 0.0.0.0 将允许您使用您的 ip 而不是 localhost 连接到 ng serve。打开浏览器到 :4200 使用 ng serve --host 0.0.0.0 --disable-host-check 将允许您使用域而不是 localhost 连接到 ng serve。打开浏览器到 :4200

在 Angular 版本 11（可能还有一些早期版本）中，--public-host 选项对我有用，例如：

$ ng serve --host 0.0.0.0 --public-host app.mypublicdomain.com

您还可以使用 ngrok 内省通过隧道运行的所有 HTTP 流量，然后可以使用 ngrok http --host-header=rewrite 4200 公开

使用 ng serve --host 0.0.0.0 命令解决了我的问题。使用 192.168.xx:5200 从另一台机器访问应用程序。

此外，检查客户端和服务器上的防火墙规则（暂时禁用防火墙或创建规则以允许流量）

使用 ng serve --host --port。

ng 服务 --host=192.111.1.11 --port=4545。

您现在可以在编译结束时看到以下行。

Angular Live Development Server 正在监听 192.111.1.11:4545，打开浏览器 http://192.111.1.11:4545/ **。

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

这对我来说非常有效（即使使用带有指向该 IP 的 A 主机的公共 IP）。

创建 proxy.conf.json 并粘贴此配置

{  
"/api/*":
    {    
        "target": "http://localhost:7070/your api project name/",
        "secure": false,
        "pathRewrite": {"^/api" : ""}
    }
}

代替：

let url = 'api/'+ your path;

从 CLI 运行：

ng serve  --host port.number —-proxy-config proxy.conf.json

对我来说，它使用“ng serve --open --host 0.0.0.0”工作，但有一个警告

警告：这是一个简单的服务器，用于在本地测试或调试 Angular 应用程序。尚未对其安全问题进行审查。

将此服务器绑定到打开的连接可能会危及您的应用程序或计算机。使用与传递给“--host”标志的主机不同的主机可能会导致 websocket 连接问题。如果是这种情况，您可能需要使用“--disableHostCheck”。

对于使用节点项目管理器的人来说，添加到 package.json 的这一行就足够了。对于角度 CLI 用户，mast3rd3mon 的回答是正确的。

你可以加

"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"

到 package.json