Establecer el host y el puerto predeterminados para ng serve en el archivo de configuración

Quiero saber si puedo configurar un host y un puerto en un archivo de configuración para no tener que escribir

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

en lugar de solo

ng serve

CLI angular 6+

En la última versión de Angular, esto se configura en el angular.jsonarchivo de configuración . Ejemplo:

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

También puede usarng config para ver / editar valores:

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

CLI angular <6

En versiones anteriores, esto se configurabaangular-cli.json debajo del defaultselemento:

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

A partir de ahora esa característica no es compatible, sin embargo, si esto es algo que le molesta, una alternativa estaría en su paquete.json ...

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

De esta manera puedes simplemente correr npm start

Otra opción si desea hacer esto en múltiples proyectos es crear un alias, que potencialmente puede nombrar y ngserveque ejecutará el comando anterior.

Puede configurar el puerto HTTP predeterminado y el que usa el servidor LiveReload con dos opciones de línea de comandos:

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

https://github.com/angular/angular-cli

Esto cambió en la última CLI angular.

El nombre del archivo cambió a angular.json, y la estructura también cambió.

Esto es lo que debes hacer:

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

Otra opción es ejecutar el ng servecomando con la --portopción ej.

ng serve --port 5050 (es decir, para el puerto 5050)

Alternativamente, el comando: ng serve --port 0asignará automáticamente un puerto disponible para su uso.

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

La primera forma es por comando CLI:

ng serve --port 2400 --open

La segunda forma es por configuración en la ubicación:

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

Realice cambios en el archivo 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
    },

Puede guardarlos en un archivo, pero tiene que ponerlo .ember-cli(al menos por el momento); ver https://github.com/angular/angular-cli/issues/1156#issuecomment-227412924

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

editar: ahora puede configurarlos en angular-cli.json a partir de la confirmación https://github.com/angular/angular-cli/commit/da255b0808dcbe2f9da62086baec98dacc4b7ec9 , que se encuentra en la compilación 1.0.0-beta.30

Si planea ejecutar el proyecto angular en un host / IP y puerto personalizados, no es necesario realizar cambios en el archivo de configuración

El siguiente comando me funcionó

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

Dónde,

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

Ejemplo

ng serve --host 192.168.322.144 --port 6300

El resultado para mí fue

Si está en Windows, puede hacerlo de esta manera:

1. En el directorio raíz de su proyecto, cree el archivo run.bat
2. Agregue su comando con su elección de configuraciones en este archivo. Por ejemplo

ng serve --host 192.168.1.2 --open

3. Ahora puede hacer clic y abrir este archivo cuando quiera servir.

Esta no es la forma estándar, pero es cómoda de usar (lo que siento).

esto es lo que puse en package.json (ejecutando 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"
  },

Luego, un inicio npm simple atraerá el contenido de inicio. También podría agregar otras opciones a los contenidos

ingrese la descripción de la imagen aquí

Solo hay una cosa que tienes que hacer. Escriba esto en su Símbolo del sistema: ng serve --port 4021 [o cualquier otro puerto que desee asignar, por ejemplo: 5050, 5051, etc.]. No es necesario hacer cambios en los archivos.

Si desea que su dirección IP local esté abierta específicamente al ejecutar ng serve, puede hacer lo siguiente:

npm install internal-ip-cli --save
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)