angular - servidor - Establezca el host y el puerto predeterminados para ng serve en el archivo de configuración

publicar proyecto angular 5

Question

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

Answer 1

CLI angular 6+

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

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

También puede usar ng config para ver / editar valores:

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

CLI angular <6

En versiones anteriores, esto se configuraba en angular-cli.json debajo del elemento defaults :

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

Answer 2

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, simplemente puede ejecutar npm start

Otra opción si desea hacer esto en varios proyectos es crear un alias, que potencialmente puede nombrar ngserve que ejecutará el comando anterior.

Answer 3

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

Answer 4

Otra opción es ejecutar el comando ng serve con la opción --port , por ejemplo

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

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

Answer 5

Puede configurar el puerto HTTP predeterminado y el utilizado por 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

Answer 6

Puede guardarlos en un archivo, pero debe ponerlo en .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

Answer 7

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

1. En el directorio raíz del 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).

Answer 8

Si planea ejecutar el proyecto angular en 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

Answer 9

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

Primera forma de comando cli:

ng serve --port 2400 --open

La segunda forma es mediante la 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": "Opciones de destino del Dev Server para Build Facade", "type": "object", "properties": {"browserTarget": {"type": "string "," descripción ":" Destino para servir ". }, "puerto": {"tipo": "número", "descripción": "Puerto para escuchar", "predeterminado": 2400},

Answer 10

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

Answer 11

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.