Comment changer le port angulaire de 4200 à tout autre


257

Je veux utiliser 5000 au lieu de 4200 ..

Ce que j'ai essayé, c'est d'avoir créé un fichier sur le nom racine ember-cliet de mettre JSON selon le code ci-dessous:

{
   "port": 5000
}

Mais mon application fonctionne toujours sur 4200 au lieu de 5000



Avez-vous également redémarré le serveur?
kris

oui @kristjanreinhold
Ashutosh Jha

Est-ce que cela répond à votre question? serveur angular-cli - comment spécifier le port par défaut
elwyn

Réponses:


429

La solution a fonctionné pour moi était

ng serve --port 4401    

(Vous pouvez remplacer 4401 par le nombre de votre choix)

Ensuite, lancez le navigateur -> http: // localhost: 4401 /

Fondamentalement, j'avais deux applications et avec l'aide de l'approche ci-dessus, je suis maintenant en mesure de les exécuter simultanément dans mon environnement de développement.


L'option '--port 4201' n'est pas enregistrée avec la commande serve
holms

6
sidenote pour les autres: ne faites pas npm start --port 4401parce npm startque ne semble pas exécuter le
--port

1
Veuillez également voir cette réponse stackoverflow.com/a/52345586/3209545
callee.args

juste un ajout, vous pouvez en même temps ouvrir l'application servie dans un nouvel onglet du navigateur en ajoutant ng serve --port 4401 --open
briancollins081

115

Vous pouvez modifier le port de votre application en entrant la commande suivante,

ng serve --port 4200

De plus, pour une configuration permanente, vous pouvez modifier le port en modifiant le fichier angular-cli.json

 "defaults": {
    "serve": {
      "port": 8080
    }
  }

2
Dans les versions plus récentes, vous devez utiliser ng serve --port 8080 (pas de ":", espace vide à la place).
Julian L.

S'il s'agit du dernier paramètre "par défaut", vous devez vous débarrasser de la virgule de fin
Oswaldo Salazar

1
Cela a changé dans les versions récentes de l'interface CLI - voir ma réponse pour plus de détails.
Nathan Friend

98

Il semble que les choses aient changé dans les versions récentes de la CLI (j'utilise 6.0.1). J'ai pu changer le port par défaut utilisé par ng serveen ajoutant une portoption à mon projet angular.json:

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

(Seules les propriétés pertinentes sont affichées dans cet exemple.)


Et je veux changer d'hôte aussi alors
Kunvar Singh

c'est vraiment la bonne réponse permanente
WtFudgE

59

Changer nodel_modules/angular-cli/commands/server.jsest une mauvaise idée car il sera mis à jour lorsque vous installerez une nouvelle version de angular-cli. Au lieu de cela , vous devez spécifier ng servir --port 5000 dans package.jsoncomme ceci:

"scripts": {
    "start": "ng serve --port 5000"
}

Vous pouvez également spécifier l'hôte avec --host 127.0.0.1


Comment démarrez-vous l'application? ng serve? Ne semble pas fonctionner lorsque je vérifie le navigateur avec,localhost:5000
Ashish Ranjan

1
Je pense que cela devrait être la réponse acceptée. Presque pour les gens de paix utilisant npm startune commande
blobmaster

Pourquoi utiliser une option de script pour une configuration permanente? Il y a un fichier pour ça, et c'estangular.json
Mozgor

59

L'emplacement des paramètres de port a changé plusieurs fois.

Si vous utilisez Angular CLI 1

Changement angular-cli.json

{
  "defaults": {
    "serve": {
      "host": "0.0.0.0",
      "port": 5000 
    }
  }
}

Si vous utilisez la dernière CLI angulaire

Changement angular.json

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "0.0.0.0",
                  "port": 5000
                }
            }
        }
        ...
    }
}

Sans changer aucun fichier

Exécutez la commande

ng serve --host 0.0.0.0 --port 5000

8
Cela devrait être considéré comme la bonne réponse car elle couvre les deux possibilités: des solutions permanentes ou temporaires.
Daniel Santana

1
J'accepte @Dan
marknt15

En cas de modifications permanentes, savez-vous si le nouveau port doit être spécifié ailleurs dans ce fichier `angular.json`? Mon serveniveau d'option contient deux articles avec browserTarget, optionset configurations/production. Dois-je ajouter cette nouvelle portentrée dans les deux ou juste celle- optionsci?
Mozgor

19

Personne n'a mis à jour la réponse pour la dernière CLI angulaire. Angular CLI

Avec latest versionangular-cli dans lequel angular-cli.json est renommé angular.json, vous pouvez changer le port en éditant le angular.jsonfichier vous spécifiez maintenant un port par"project"

projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4500
                }
            }
        }
    }
}

En savoir plus here


Qu'en est-il de l'entrée `serve / configurations / production` qui contient également une browserTargetentrée, identique à celle serve / optionsoù nous ajoutons la nouvelle port?
Mozgor

1
La meilleure réponse pour la dernière version de Angular CLI
Dacomis

14

J'utilise généralement la ng setcommande pour modifier les paramètres de la CLI angulaire pour le niveau du projet.

ng set defaults.serve.port=4201

Il modifie vos modifications .angular.cli.jsonet ajoute les paramètres de port comme indiqué précédemment .

Après ce changement, vous pouvez utiliser simplement ng serveet il va utiliser le port préféré sans avoir besoin de le spécifier à chaque fois.


get / set semble être obsolète au profit de config dans 6.0, donc cela ne fonctionne plus.
VanAlbert

10

vous pouvez également entrer la commande ci-dessous dans votre cli angulaire où vous entrez normalement npm start

ng serve --host "ip-address" --port "port-number"



6

goto ce fichier

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

et port de recherche

"port": {
  "type": "number",
  "description": "Port to listen on.",
  "default": 4200
},

modifiez la valeur par défaut comme vous le souhaitez et redémarrez le serveur


Fonctionne pour moi, il suffit de remarquer de changer le fichier mentionné et non l'autre - node_modules/@angular/cli/lib/config/schema.json qui contient la même propriété.
lingar

5
  • Pour les permanents:

    Goto nodel_modules / angular-cli / commandes / server.js Recherchez var defaultPort = process.env.PORT || 4200; et remplacez 4200 par tout ce que vous voulez.

  • Pour exécuter maintenant:

    ng serve --port 4500 (Vous pouvez remplacer 4500 par n'importe quel numéro que vous souhaitez utiliser comme port)


1
Je ne pense pas que changer le contenu d'un paquet installé localement sur node_modulessoit une bonne pratique.
Bruno Brant

5

Il n'est pas recommandé de modifier les modules de noeud car les mises à jour ou la réinstallation peuvent supprimer ces modifications. Mieux vaut donc changer de cli angulaire

Angular 9 dans angular.json

{
    "projects": {
            "targets": {
                "serve": {
                    "options": {
                         "port": 5000
                     }
                }     
            }     
    }
}  

4

Vous pouvez modifier le numéro de port par défaut configuré dans le fichier serve.js.

Le chemin sera project_direcory/node_modules/angular-cli/commands/serve.js.

Rechercher cette ligne -> var defaultPort = process.env.PORT || 4200;
Remplacer par cette ligne ->var defaultPort = process.env.PORT || 5000;


4
Si vous lisez ceci et envisagez de le faire ... s'il vous plaît, ne modifiez jamais les fichiers de dépendance.
emix


4

Exécuter la commande ci-dessous pour un autre que 4200

ng serve --port 4500

4

Dans angular.json:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
          "browserTarget": "projectname:build",
          "port": 5000
         }

J'utilise angular-cli. Cela a fonctionné pour moi.


4

en angulaire 2 ++.

Pour changer de port, vous pouvez exécuter la commande ci-dessous dans le terminal:

ng serve --host 0.0.0.0 --port 5000.

2

Bien qu'il existe déjà de nombreuses solutions valides dans les réponses ci-dessus, voici un guide visuel et une solution spécifique pour les projets Angular 7 (éventuellement des versions antérieures également, aucune garantie cependant) utilisant Visual Studio Code. Localisez le schéma.json dans les répertoires comme indiqué dans l'arborescence d'images et modifiez l'entier sous port -> par défaut pour un changement permanent de port dans le navigateur.

entrez la description de l'image ici


@ s34N Heureux d'entendre cela. Si la réponse a été utile, n'oubliez pas de donner un vote positif sur le message si ce n'est pas déjà fait. Merci mon pote.
themightyhulk

2

Aller à angular.json fichier,

Recherche du mot clé "serve":

Ajoutez un portmot clé comme indiqué ci-dessous:

 "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
         "browserTarget": "my-new-angular-app:build",
         "port": 3001
     },
     ...

1

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

Première façon de commander cli:

ng serve --port 2400 --open

La deuxième façon consiste à configurer à l'emplacement: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json .

Apportez des modifications au schema.jsonfichier.

{
 "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
    },

Il n'est pas recommandé de modifier les fichiers dans node_modules qui pourraient être remplacés après la réinstallation du package. Sajeetharan a présenté une très bonne solution.
Daniel Santana

1

Just Run

ng serve --port yourport

Exemple:

ng serve --port 4401


1

Le code a fonctionné pour moi était le suivant

ng serve --port ABCD

Par exemple

ng serve --port 6300

0

Pour exécuter et ouvrir dans le navigateur, utilisez automatiquement le drapeau -openou tout simplement-o

ng serve -o --port 4200

Remarque: le port 4200 est arbitraire. Il peut s'agir de n'importe quel port de votre choix


0

Si vous souhaitez utiliser la variable d'environnement NodeJS pour configurer la valeur du port du serveur de développement Angular CLI, l'approche suivante est possible:

  • créer un script NodeJS, qui aura un accès à la variable d'environnement (par exemple, DEV_SERVER_PORT) et pourrait s'exécuter ng serveavec une --portvaleur de paramètre tirée de cette variable ( child_process pourrait être notre ami ici):
const child_process = require('child_process');
const child = child_process.exec(`ng serve --port=${process.env.DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));
  • mettre à jour package.json pour fournir ce script exécuté via npm
  • n'oubliez pas de configurer DEV_SERVER_PORTla variable d'environnement (peut être fait via dotenv )

Voici également la description complète de cette approche: Comment changer le port du serveur de développement CLI angulaire via .env .


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.