Comment changer le port angulaire de 4200 à tout autre

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

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.

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
    }
  }

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.)

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

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

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

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.

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"

vous pouvez également écrire cette commande: ng serve -p 5000

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

• 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)

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
                     }
                }     
            }     
    }
}  

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;

il suffit de courir ng serve --port 5000 --open

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

ng serve --port 4500

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.

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.

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.

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
     },
     ...

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

Just Run

ng serve --port yourport

Exemple:

ng serve --port 4401

Le code a fonctionné pour moi était le suivant

ng serve --port ABCD

Par exemple

ng serve --port 6300

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

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 .

Cela ouvrira automatiquement votre fenêtre

ng serve -o --port 4801