Question

如何在Angular2的localhost外部进行访问？我可以轻松地在localhost:3030/panel导航，但是当我编写10.123.14.12:3030/panel/之类的IP时，我无法导航。

你能告诉我如何解决这个问题吗？我没有使用npm（节点项目管理 - 节点安装/节点启动）来安装和运行项目。

如果您愿意，我可以提供package.json和index.html。

Answer 1

使用ng serve --host 0.0.0.0，您可以使用自己的IP而非ng serve连接到localhost。

修改

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

编辑2

在较新版本的cli中（我认为v5及更高版本），您可以再次使用0.0.0.0作为IP来托管网络中的任何人进行通信。

Answer 2

Mac用户：

转到系统偏好设置 - ＆gt;网络 - ＆gt;的Wi-Fi
复制状态（通常为192.168.1.x）
将其粘贴到您的ng服务中，如：ng serve --host 192.168.1.x

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

Answer 3

运行命令 - ＆＃34; ng serve --host = 0.0.0.0 --disable-host-check＆＃34;

这将禁用主机检查并允许从外部（而不是localhost）使用ip地址

进行访问

Answer 4

您还可以使用 ngrok 来检查通过隧道运行的所有HTTP流量，则可以使用ngrok http --host-header=rewrite 4200

进行公开

Answer 5

可以帮助某人的快速解决方案：

将此行添加为开始ng serve --host 0.0.0.0 --disable-host-check的值在您的package.json

中

例如：

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

然后只需执行start或npm run start

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

Answer 6

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

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

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

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

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

npm start

Answer 7

打开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

Answer 8

我仅按如下所示在项目中编辑angular.json文件，

...

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

...

Answer 9

如果您在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"]

Answer 10

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

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

Answer 11

问题出在防火墙上。如果您使用的是Windows，请确保允许节点通过

Answer 12

不需要package.json进行更改。

对我来说，它可以使用：

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

主机：http：// localhost：5999 /

Answer 13

使用此：

ng serve --host 0.0.0.0 --port xxxx

Answer 14

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

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

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

Answer 15

创建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

Answer 16

使用 ng serve --host<Your IP> --port<Required if any> 。
ng服务--host = 192.111.1.11 --port = 4545。
您现在可以在编译结束时看到以下行。

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

Answer 17

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

您可以添加

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

to package.json

如何允许在localhost之外访问

17 个答案: