Définir l'hôte et le port par défaut pour ng serve dans le fichier de configuration


166

Je veux savoir si je peux définir un hôte et un port dans un fichier de configuration pour ne pas avoir à taper

ng serve --host foo.bar --port 80

au lieu de juste

ng serve

Réponses:


233

CLI angulaire 6+

Dans la dernière version d'Angular, cela est défini dans le angular.jsonfichier de configuration . Exemple:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "projects": {
        "my-project": {
            "architect": {
                "serve": {
                    "options": {
                        "port": 4444
                    }
                }
            }
        }
    }
}

Vous pouvez également utiliserng config pour afficher / modifier les valeurs:

ng config projects["my-project"].architect["serve"].options {port:4444}

CLI angulaire <6

Dans les versions précédentes, cela était définiangular-cli.json sous l' defaultsélément:

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "10.1.2.3"
    }
  }
}

7
Pour faciliter les choses, vous pouvez spécifier à la 0.0.0.0place de l'adresse IP hôte pour écouter sur tous les périphériques Ethernet. De cette façon, l'hôte local et l'adresse IP publique peuvent être utilisés.
dman

VS2017 semble ignorer le paramètre de port pour une raison étrange, mais j'ai utilisé cette astuce avec l'ajout de @dman (0.0.0.0 en tant qu'hôte) pour au moins activer les connexions à distance.
Ola Berntsson

4
Il semble que les choses aient changé dans les versions récentes de la CLI (j'utilise la version 6). Voir ici pour plus de détails .
Nathan Friend

Existe-t-il un moyen de rendre cet environnement de configuration spécifique?
Pankaj le

71

À l'heure actuelle, cette fonctionnalité n'est pas prise en charge, mais si cela vous dérange, une alternative serait dans votre package.json ...

"scripts": {
  "start": "ng serve --host foo.bar --port 80"
}

De cette façon, vous pouvez simplement exécuter npm start

Une autre option si vous souhaitez le faire sur plusieurs projets est de créer un alias, que vous pouvez potentiellement nommer, ngservequi exécutera la commande ci-dessus.


désolé, foo.bar, référez-vous pour quoi? MISE À JOUR: je l'ai supprimé et fonctionne, mais je ne sais pas.
Muhammed Moussa


29

Cela a changé dans la dernière CLI angulaire.

Le nom du fichier est devenu angular.jsonet la structure a également changé.

Voici ce que vous devez faire:

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "foo.bar",
                  "port": 80
                }
            }
        }
        ...
    }
}

1
A travaillé pour moi avec @ angular / cli version 6.1.5
PHEDev

1
A travaillé pour moi avec @ angular / cli version 7.0.6
Kerry Jones

16

Une autre option consiste à exécuter la ng servecommande avec l' --portoption par exemple

ng serve --port 5050 (c'est-à-dire pour le port 5050)

Alternativement, la commande ng serve --port 0:, attribuera automatiquement un port disponible à utiliser.


Le --port 0 bit était une bonne information mais je ne suis pas sûr qu'il réponde à la question.
Ash

J'ai aimé l'option --port 0 qui attribuait automatiquement le port disponible à utiliser ...
vinsinraw

La question demande spécifiquement comment le définir dans un fichier de configuration
Ojonugwa Jude Ochalifu

11

Nous avons deux façons de modifier le numéro de port par défaut dans Angular.

La première façon est par la commande CLI:

ng serve --port 2400 --open

La deuxième façon est de configurer à l'emplacement:

ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Apportez des modifications dans le fichier schema.json.

{
 "title": "Dev Server Target",
  "description": "Dev Server target options for Build Facade.",
  "type": "object",
  "properties": {
    "browserTarget": {
      "type": "string",
      "description": "Target to serve."
    },
    "port": {
      "type": "number",
      "description": "Port to listen on.",
      "default": 2400
    },

4
Vous ne souhaitez pas remplacer ou modifier les fichiers source. angular.json est le moyen correct de remplacer les valeurs par défaut du schéma, comme mentionné dans la réponse acceptée.
Bjørn Lindner

6

Vous pouvez les enregistrer dans un fichier, mais vous devez les mettre .ember-cli(au moins pour le moment); voir https://github.com/angular/angular-cli/issues/1156#issuecomment-227412924

{
"port": 4201,
"liveReload": true,
"host": "dev.domain.org",
"live-reload-port": 49153
}

edit: vous pouvez maintenant les définir dans angular-cli.json à partir de la validation https://github.com/angular/angular-cli/commit/da255b0808dcbe2f9da62086baec98dacc4b7ec9 , qui est dans la version 1.0.0-beta.30


5

Si vous envisagez d' exécuter le projet angulaire dans l' hôte / IP et le port personnalisés, il n'est pas nécessaire de modifier le fichier de configuration.

La commande suivante a fonctionné pour moi

ng serve --host aaa.bbb.ccc.ddd --port xxxx

Où,

aaa.bbb.ccc.ddd --> IP you want to run the project
xxx --> Port you want to run the project

Exemple

ng serve --host 192.168.322.144 --port 6300

Le résultat pour moi était

entrez la description de l'image ici


3

Si vous êtes sous Windows, vous pouvez le faire de cette façon:

  1. Dans le répertoire racine de votre projet, créez le fichier run.bat
  2. Ajoutez votre commande avec votre choix de configurations dans ce fichier. Par exemple

ng serve --host 192.168.1.2 --open

  1. Vous pouvez maintenant cliquer et ouvrir ce fichier chaque fois que vous souhaitez servir.

Ce n'est pas une manière standard mais confortable à utiliser (ce que je ressens).


0

voici ce que j'ai mis dans package.json (exécutant angular 6):

{
  "name": "local-weather-app",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 5000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Ensuite, un simple début npm récupérera le contenu de start. Pourrait également ajouter d'autres options au contenu



0

Si vous souhaitez spécifiquement ouvrir votre adresse IP locale lors de l'exécution de ng serve, vous pouvez effectuer les opérations suivantes:

npm install internal-ip-cli --save
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.