Angular 如何允许在本地主机之外进行访问

如何允许在Angular2的本地主机之外进行访问？我可以轻松地在

localhost:3030/panel

上导航，但在编写IP时无法导航，例如

10.123.14.12:3030/panel/

你能告诉我怎么修吗？我没有使用

npm

（节点项目管理-节点安装/节点启动）来安装和运行项目

如果您愿意，我可以使用

ng-serve提供我的
package.json
和
index.html
，主机0.0.0

将允许您使用ip连接到

ng-serve

，而不是

localhost

编辑

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

编辑2

---

在较新版本的cli（我认为是v5和更高版本）中，您可以再次使用

0.0.0.0

作为ip主机，让网络中的任何人都可以与之交谈。

对于使用node project manager的人来说，这一行添加到package.json就足够了。对于angular CLI用户，mast3rd3mon的答案是正确的

你可以加上

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

要使用package.json

Mac用户：

转到系统首选项->网络->Wi-Fi

复制状态下的IP地址（通常为192.168.1.x）

将其粘贴到您的ng serve中，如：

ng serve--host 192.168.1.x

然后，您必须能够通过

192.168.1.x:4200

运行命令在其他设备上查看您的页面

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

---

这将禁用主机检查并允许使用IP地址从外部（而不是本地主机）访问打开cmd并导航到项目位置，即您为项目运行npm安装或ng serve的位置

然后运行命令-

ngserve--host 10.202.32.45

，其中

10.202.32.45

是您的IP地址

您可以在

10.202.32.45:4200

访问您的页面，其中4200是您的端口号

---

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

localhost:4200

我只需在我的项目中编辑

angular.json

文件，如下所示，即可正常工作

---

…

您还可以使用

---

，然后您可以使用ngrok http--host header=rewrite 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

---

因为问题是防火墙。如果您在Windows上，请确保允许节点通过

---

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

将此行添加为start

ng serve--host 0.0.0.0--disable host check

在您的

package.json中

例：

然后只需执行
start
或
npm run start

您将能够从其他本地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”工作，但有一个警告


警告：这是一个用于测试或调试应用程序的简单服务器
在当地。它还没有被审查安全问题

将此服务器绑定到打开的连接可能会影响您的应用程序或应用程序
电脑。使用与传递给“-host”标志的主机不同的主机可能会导致
websocket连接问题。您可能需要使用“-disableHostCheck”，如果这是
案例。
无需更改package.json

对我来说，它的工作原理是：

ng serve --host=0.0.0.0 --port=5999 --disable-host-check
ng serve--主机=0.0.0.0--端口=5999--禁用主机检查
主持人:http://localhost:5999/

使用ng serve--host--port

ng serve——主机=192.111.1.11——端口=4545

现在，您可以在编译结束时看到下面的一行

Angular Live Development Server正在收听192.111.1.11:4545，请在

http://192.111.1.11:4545/

**

---

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

在Angular版本11（可能还有一些早期版本）中，

--public host

选项为我实现了这一点，例如：

---

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

您使用ng serve吗？您尝试过ng serve--host 10.123.14.12吗？我厌倦了ng serve，它说“我必须在angular--cli项目中才能使用serve命令”。它说“您必须在angluar--cli项目中才能使用serve命令“写入ng sreve时出现红色警告，同时显示黄色消息，指示我正在运行Node的6.2.2版，在写入ng servefirst后，未来版本的CLI将不支持该版本，请尝试更新Node，然后尝试重新启动终端/VSCODE。我将其从包json更新为“@types/Node”：“6.0.46”，但还是得到了同样的信息，我不明白人们是如何对我的问题投赞成票的，我也不知道是谁做的。即使你理解错了问题，给了我错误的答案，他们仍然给我以“-”的名声。我自己找到了答案。我应该在PackageJ中添加“服务器”：“webpack dev server--inline--progress--host 0.0.0--port 3000”这对我来说很有用：

ng serve--open--host 0.0.0--disable host check

我不需要--disable host check<代码>ng serve--主机0.0.0.0对我来说很好。主机检查应该做什么？我曾经需要

禁用主机检查

，否则我会收到消息“无效主机头”

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

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