【问题标题】:How to test an app created with Angular CLI ng serve from another device?如何从另一台设备测试使用 Angular CLI ng 服务创建的应用程序?
【发布时间】:2016-08-21 23:34:02
【问题描述】:

我有一个使用 Angular CLI 从头开始​​生成的应用程序。 CLI版本angular-cli: 1.0.0-beta.11-webpack.2

我正在尝试通过我的智能手机对其进行测试,但我收到 Connection denied

所以,我在笔记本电脑上运行ng serve 并尝试访问该应用:

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

这曾经与以前的 SystemJS 版本的 CLI 一起工作。我检查了我没有运行防火墙。

如何修复或调试此错误?

我使用的是 Mac。

【问题讨论】:

    标签: networking angular angular-cli


    【解决方案1】:

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

    这应该有效: ng serve --host 0.0.0.0

    解释: https://github.com/angular/angular-cli/pull/1475#issuecomment-235986121

    【讨论】:

    • 正是我需要的。谢谢!
    • 这对我不起作用。你在地址栏中放了什么?
    • 它曾经工作过。您确定您的问题与 angular-cli 无关吗?我无法完成构建。它停滞在 70%。
    • 谢谢!!以为我必须构建并部署到服务器只是为了测试 CSS 更改。
    【解决方案2】:

    在 package.json 中

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

    但是--disable-host-check 会带来安全风险 你需要 "@angular/cli": "^1.1.0-rc.2" 因为这个标志出现在 1.1 版本中

    【讨论】:

    • 在 Angular CLI 版本 1.2.7 上使用 --disable-host-check 运行会发出此错误:WARNING Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
    【解决方案3】:

    遵循此页面上的建议: https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a,这对我有用:

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

    【讨论】:

      【解决方案4】:

      也许这会有所帮助(@Captain Whippet 的回答有点自动化):

      开发服务器.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 start”

      然后,您可以通过黄色打印的地址在本地网络上的任何设备上打开您的应用。

      @angular/cli:1.3.2,节点:6.9.5

      在 Mac 和 Windows 上测试

      【讨论】:

        【解决方案5】:

        你必须在 node_modules angular cli 文件夹中找到所有出现的 localhost 并用 0.0.0.0 替换(特别是一个,取决于你的 angular-cli 版本)。

        然后在 package.json 中放入 ng serve --host 0.0.0.0

        在我的例子中,文件是 commands/serve.js

        【讨论】:

        • 永远不要手动编辑 node_modules 中的文件。这些是从外部供应商导入的库..
        • 在本地环境中从 localhost 到 0.0.0.0 没关系
        • 不,您永远不会在任何情况下编辑供应商文件。
        • 如果提供的解决方案是错误的,负面反馈可以帮助其他人避免它。这就是向下箭头的原因。
        • 这不是一个解决方案,它只是为你工作。另外,这不是给任何人的正确建议。这就像通过将口香糖粘在软管上来固定软管上的孔。它有时会起作用,而且只会持续一段时间……但它不是“解决方案”。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-01-13
        • 2017-11-25
        • 1970-01-01
        • 2015-01-31
        相关资源
        最近更新 更多