Cómo cambiar el puerto angular de 4200 a cualquier otro

Quiero usar 5000 en lugar de 4200 ..

Lo que he intentado es haber creado un archivo con el nombre raíz ember-cliy poner JSON de acuerdo con el código a continuación:

{
   "port": 5000
}

Pero mi aplicación todavía se ejecuta en 4200 en lugar de 5000

La solución que funcionó para mí fue

ng serve --port 4401    

(Puede cambiar 4401 al número que desee)

Luego inicie el navegador -> http: // localhost: 4401 /

Básicamente, tenía dos aplicaciones y, con la ayuda del enfoque anterior, ahora puedo ejecutar ambas simultáneamente en mi entorno de desarrollo.

Puede cambiar el puerto de su aplicación ingresando el siguiente comando,

ng serve --port 4200

Además, para una configuración permanente, puede cambiar el puerto editando el archivo angular-cli.json

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

Parece que las cosas han cambiado en versiones recientes de la CLI (estoy usando 6.0.1). Pude cambiar el puerto predeterminado utilizado ng serveal agregar una portopción a mi proyecto angular.json:

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

(Solo las propiedades relevantes se muestran en este ejemplo).

Cambiar nodel_modules/angular-cli/commands/server.jses una mala idea, ya que se actualizará cuando instales una nueva versión de angular-cli. En su lugar, debe especificar ng serve --port 5000 en de package.jsonesta manera:

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

También puede especificar el host con --host 127.0.0.1

La ubicación de la configuración del puerto ha cambiado un par de veces.

Si usa CLI angular 1

Cambio angular-cli.json

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

Si usa la última CLI angular

Cambio angular.json

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

Sin cambiar ningún archivo

Ejecuta el comando

ng serve --host 0.0.0.0 --port 5000

Nadie ha actualizado la respuesta para la última CLI angular. Angular CLI

Con latest versionangular-cli en el que se renombró angular-cli.json angular.json, puede cambiar el puerto editando el angular.jsonarchivo que ahora especifica un puerto por"project"

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

Leer más al respecto here

Usualmente uso el ng setcomando para cambiar la configuración de CLI angular para el nivel de proyecto.

ng set defaults.serve.port=4201

Cambia su cambio .angular.cli.jsony agrega la configuración del puerto como se mencionó anteriormente .

Después de este cambio, puede usarlo de manera simple ng servey usará el puerto preferido sin la necesidad de especificarlo cada vez.

también puede ingresar el siguiente comando en su cli angular, donde normalmente ingresa npm start

ng serve --host "dirección IP" --port "número de puerto"

También puedes escribir este comando: ng serve -p 5000

ir a este archivo

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

y buscar puerto

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

cambie el valor predeterminado lo que quiera y reinicie el servidor

• Para permanente:

  Ir a nodel_modules / angular-cli / command / server.js Buscar var defaultPort = process.env.PORT || 4200; y cambie 4200 a cualquier otra cosa que desee.

• Para ejecutar ahora:

  ng serve --port 4500 (Usted cambia 4500 a cualquier número que desee usar como puerto)

No se recomienda cambiar en los módulos de nodo, ya que las actualizaciones o la reinstalación pueden eliminar esos cambios. Así que mejor cambiar en cli angular

Angular 9 en angular.json

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

Puede editar el número de puerto predeterminado que está configurado en el archivo serve.js.

El camino será project_direcory/node_modules/angular-cli/commands/serve.js.

Busque esta línea -> var defaultPort = process.env.PORT || 4200;
Reemplace con esta línea ->var defaultPort = process.env.PORT || 5000;

simplemente corre ng serve --port 5000 --open

Ejecute el siguiente comando para otro que no sea 4200

ng serve --port 4500

En angular.json:

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

Estoy usando angular-cli. Esto funcionó para mí.

en angular 2 ++.

Para cambiar el puerto, puede ejecutar el siguiente comando en la terminal:

ng serve --host 0.0.0.0 --port 5000.

Aunque ya hay numerosas soluciones válidas en las respuestas anteriores, aquí hay una guía visual y una solución específica para proyectos de Angular 7 (posiblemente también versiones anteriores, aunque no hay garantías) usando Visual Studio Code. Localice el schema.json en los directorios como se muestra en el árbol de imágenes y modifique el número entero en puerto -> predeterminado para un cambio permanente de puerto en el navegador.

Ir al angular.jsonarchivo

Busque la palabra clave "serve":

Agregue la portpalabra clave como se muestra a continuación:

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

Tenemos dos formas de cambiar el número de puerto predeterminado en Angular.

Primera forma de comando cli:

ng serve --port 2400 --open

Segunda manera es mediante la configuración de la ubicación: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Hacer cambios en el schema.jsonarchivo.

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

Solo corre

ng serve --port yourport

Ejemplo:

ng serve --port 4401

El código que funcionó para mí fue el siguiente

ng serve --port ABCD

Por ejemplo

ng serve --port 6300

Para ejecutar y abrir en el navegador, use automáticamente la bandera -openo simplemente-o

ng serve -o --port 4200

Nota: El puerto 4200 es arbitrario. Puede ser cualquier puerto de su elección.

Si desea utilizar la variable de entorno NodeJS para configurar el valor del puerto del servidor de desarrollo Angular CLI, es posible el siguiente enfoque:

• cree el script NodeJS, que tendrá acceso a la variable de entorno (digamos DEV_SERVER_PORT) y podría ejecutarse ng servecon el --portvalor del parámetro tomado de esa variable (el proceso hijo podría ser nuestro amigo aquí):

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()));

• actualice package.json para proporcionar este script que se ejecuta a través de npm
• no olvide configurar DEV_SERVER_PORTla variable de entorno (se puede hacer a través de dotenv )

Aquí también está la descripción completa de este enfoque: Cómo cambiar el puerto del servidor de desarrollo de CLI angular a través de .env .

Esto también abrirá automáticamente tu ventana

ng serve -o --port 4801