Networking 如何测试使用Angular CLI从其他设备创建的应用程序？

我有一个应用程序生成的角度CLI从头开始。CLI版本

angular CLI:1.0.0-beta.11网页包2

我正试图从智能手机上测试它，但连接被拒绝

因此，我在笔记本电脑上运行

ng serve

，并尝试访问该应用程序：

• 从笔记本电脑，使用

  localhost

  ：工作
• 使用IP从笔记本电脑：连接被拒绝
• 从智能手机，使用IP:连接被拒绝

这用于使用以前的SystemJS版本的CLI。我检查过没有防火墙在运行

如何修复或调试此错误

---

我正在使用Mac。

添加值为“0.0.0.0”的主机标志应允许您从本地网络上的任何设备访问Web服务器

这应该起作用：

ng服务——主机0.0.0.0

有关解释：

---

您必须在node_modules angular cli文件夹中找到所有发生的localhost，并将其替换为0.0.0.0（具体一个，取决于angular cli版本）

然后在package.json中放入ng serve——主机0.0.0.0

在我的例子中，文件是package.json中的commands/service.js

 "start": "ng serve --host 0.0.0.0   --port 4200 --disable-host-check ",

但是，禁用主机检查将是一种安全风险 你需要

---

“@angular/cli”：“^1.1.0-rc.2”

，该标志出现在1.1版中

，遵循本页上的建议： ，这对我很有用：

---

ng-serve--host 0.0.0.0--host my-computer

也许这会很有帮助（有点自动化版本的@Captain Whippet的答案）：

dev-server.js：

const os = require('os');
const { spawn } = require('child_process');

function getLocalIp(ipMatchArr) {
  const networkInterfaces = os.networkInterfaces();
  let matchingIps = Object.keys(networkInterfaces).reduce((arr, name) => {
    const matchingInterface = networkInterfaces[name].find(iface =>
      iface.family === 'IPv4' && ipMatchArr.find(match => iface.address.indexOf(match) > -1));
      if (matchingInterface) arr.push(matchingInterface.address);
      return arr;
  }, []);

  if (matchingIps.length) {
    return matchingIps[0];
  }
  else {
    throw(`Error. Unable to find ip to use as public host: ipMatches=['${ipMatchArr.join("', '")}']`);
  }
}

function launchDevServer(address) {
  const port = process.env.port || 4200;
  const publicHostname = address + ":" + port;
  console.log(`[[[ Access your NG LIVE DEV server on \x1b[33m ${publicHostname} \x1b[0m ]]]`);
  spawn(
      "ng serve"
    , [
          "--host 0.0.0.0"
        , `--public ${publicHostname}`
      ]
    , { stdio: 'inherit', shell: true }
  );
}

/* execute */
launchDevServer(getLocalIp(['192.168.1.', '192.168.0.']));

package.json：

"scripts": {
    "start": "node dev-server.js"
  }

然后运行“npm启动” 然后，您可以通过黄色打印的地址在本地网络上的任何设备上打开应用程序

@角度/cli:1.3.2，节点：6.9.5

---

在Mac和Windows上测试

正是我所需要的。非常感谢。这对我不管用。你在地址栏里放了什么？它过去是有用的。您确定您的问题不在angular cli上吗？我无法完成一个构建。它以70%的速度停止。解决方案：谢谢！！我想我必须构建并部署到服务器上，只是为了测试CSS更改。永远不要在node_模块中手动编辑文件。这些是从外部供应商导入的库。在您的本地环境中，从localhost到0.0.0.0是可以的，您从不在任何情况下编辑供应商文件。如果提供的解决方案错误，则负面反馈可帮助其他人避免。这就是为什么向下箭头会出现的原因。它不是一个解决方案，它只是为你工作。此外，这不是给任何人的正确建议。这就像把口香糖粘在软管上固定一个洞。它有时会起作用，而且只会持续一段时间。。。但这并不是“解决方案”。在Angular CLI 1.2.7版上使用

--disable host check

运行时会发出以下错误：

警告使用--disable host check运行服务器存在安全风险。看见https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a 有关详细信息。