Comment tester une application créée avec Angular CLI ng serve depuis un autre appareil?

Question

J'ai une application générée avec Angulaire de la CLI à partir de zéro. Version CLI angular-cli: 1.0.0-beta.11-webpack.2

Je suis en train de le tester à partir de mon smartphone, mais je reçois Connexion refusée.

Donc, je lance ng serve sur mon portable et essayez d'accéder à l'application:

• De l'ordinateur portable, à l'aide de localhost: Fonctionne
• De l'ordinateur portable, à l'aide d'IP: Connexion refusée
• À partir d'un smartphone, à l'aide d'IP: Connexion refusée

Cette habitude de travailler avec la précédente, SystemJS version de la CLI. J'ai vérifié que je n'ai pas de pare-feu en cours d'exécution.

Comment pourrais-je réparer ou déboguer cette erreur?

J'utilise un Mac.

Answer 1

L'ajout de l'indicateur d'hôte avec la valeur "0.0.0.0" devrait vous permettre d'accéder au serveur Web depuis n'importe quel appareil de votre réseau local.

Cela devrait fonctionner: ng serve --host 0.0.0.0

Pour une explication: https://github.com/angular/angular-cli/pull/1475#issuecomment-235986121

Answer 2

Dans package.json

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

Cependant --disable-host-check serait un risque pour la sécurité et vous aurez besoin de "@angular/cli": "^1.1.0-rc.2" car cet indicateur est apparu dans la version 1.1

Answer 3

En suivant les conseils de cette page: https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a , cela a fonctionné pour moi:

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

Answer 4

Peut-être que cela peut être utile (une version un peu automatisée de la réponse de @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"
  }
 

puis exécutez "npm start"

Vous pouvez ensuite ouvrir votre application sur n'importe quel appareil de votre réseau local via une adresse imprimée en jaune.

@ angulaire / cli: 1.3.2, noeud: 6.9.5

testé sur Mac et Windows

Answer 5

vous devez trouver dans le dossier node_modules angular cli toutes les occurrences de localhost et remplacer (un en particulier, selon votre version angular-cli) par 0.0.0.0.

puis dans package.json mettre ng serve --host 0.0.0.0

Dans mon cas, le fichier est commandes / serve.js