Как протестировать приложение, созданное с помощью функции Angular CLI ng с другого устройства?

У меня есть приложение, созданное с помощью Angular CLI с нуля. Версия CLI angular-cli: 1.0.0-beta.11-webpack.2

Я пытаюсь проверить его со своего смартфона, но я получаю Connection отказался.

Итак, я запускаю ng serve на своем ноутбуке и пытаюсь получить доступ к приложению:

С ноутбука, используя localhost: Works
С ноутбука, используя IP: Connection отказано
С смартфона, используя IP: Connection отказано

Это использовалось для работы с предыдущей версией CLI SystemJS. Я проверил, что у меня нет брандмауэра.

Как я могу исправить или отладить эту ошибку?

Я использую Mac.

Ответ 1

Добавление флага хоста со значением "0.0.0.0" должно позволить вам получить доступ к веб-серверу с любого устройства в вашей локальной сети.

Это должно работать: ng serve --host 0.0.0.0

Для объяснения: https://github.com/angular/angular-cli/pull/1475#issuecomment-235986121

Ответ 2

В пакете.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

Ответ 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):

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 start"

Затем вы можете открыть приложение на любом устройстве в локальной сети по адресу, указанному желтым цветом.

@angular/cli: 1.3.2, узел: 6.9.5

протестирован на Mac и Windows

Ответ 5

вы должны найти в node_modules угловую папку cli все вхождения localhost и заменить (в частности, в зависимости от вашей версии angular-cli) с 0.0.0.0.

затем в пакете. json put ng serve --host 0.0.0.0

В моем случае файлом являются команды /serve.js