servidor angular-cli: cómo especificar el puerto predeterminado


130

Usando angular-cli con el ng servecomando, ¿cómo puedo especificar un puerto predeterminado para que no tenga que pasar la --portbandera manualmente cada vez?

Me gustaría cambiar el puerto predeterminado 4200.

Respuestas:


225

Actualización para @ angular / cli @ 9.x: y más

En angular.jsonpuede especificar un puerto por "proyecto"

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

Todas las opciones disponibles:

https://angular.io/guide/workspace-config#project-tool-configuration-options

Alternativamente, puede especificar el puerto cada vez que ejecute ng serve así:

ng serve --port 1337

Con este enfoque, puede poner esto en un script en su package.json para que sea más fácil ejecutarlo cada vez / compartir la configuración con otros miembros de su equipo:

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

Legado:

Actualización para @ angular / cli final:

Dentro angular-cli.jsonpuede especificar el puerto en los valores predeterminados:

"defaults": {
  "serve": {
    "port": 1337
  }
}

Legacy-er:

Probado en angular-cli@1.0.0-beta.22-1

El servidor angular-cliviene del ember-cliproyecto. Para configurar el servidor, cree un .ember-cliarchivo en la raíz del proyecto. Agregue su configuración JSON allí:

{
   "port": 1337
}

Reinicie el servidor y servirá en ese puerto.

Hay más opciones especificadas aquí: http://ember-cli.com/#runtime-configuration

{
  "skipGit" : true,
  "port" : 999,
  "host" : "0.1.0.1",
  "liveReload" : true,
  "environment" : "mock-development",
  "checkForUpdates" : false
}

Parece que las cosas han cambiado en las versiones recientes de la CLI (estoy usando la versión 6). Ver aquí para más detalles .
Nathan Friend

73

En Angular 2 cli@2.3.1,

Para ejecutar un nuevo proyecto en un puerto diferente, una forma es especificar el puerto mientras ejecuta el comando ng serve.

ng serve --port 4201

o de la otra manera, puede editar su parte de scripts de archivo package.json y adjuntar el puerto a su variable de inicio como mencioné a continuación y luego simplemente ejecutar "npm start"

 "scripts": {

    "ng": "ng",
    "start": "ng serve --port 4201",
    ... : ...,
    ... : ....
}

de esta manera es mucho mejor donde no necesita definir el puerto explícitamente cada vez.


13

Use scripts npm en su lugar ... Edite su package.json y agregue el comando a la sección de scripts.

{
  "name": "my new project",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 8080",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.26",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

Entonces solo ejecuta npm start


Esta es la forma correcta de hacer esto, permanentemente; así que no tiene que especificar el parámetro de línea de comandos para --port cada vez. También se requiere el parámetro --host en esta respuesta para ejecutar Angular 4 a través de Vagrant (o cualquier sistema remoto), por lo que mata 2 pájaros de un tiro.
Scott Byers

8

Ahora puede especificar el puerto en .angular-cli.json bajo los valores predeterminados:

"defaults": {
  "styleExt": "scss",
  "serve": {
    "port": 8080
  },
  "component": {}
}

Probado en angular-cli v1.0.6


¡¡¡Gracias!!! Lo mismo se ha probado con @ angular / cli: 1.3.0 .
Techno Cracker

3

Para @ angular / cli v6.2.1

El archivo de configuración del proyecto angular.jsonpuede manejar múltiples proyectos (espacios de trabajo) que se pueden servir individualmente.

ng config projects.my-test-project.targets.serve.options.port 4201

Donde la my-test-projectparte es el nombre del proyecto que configuró con el ng newcomando como aquí:

$ ng new my-test-project
$ cd my-test-project
$ ng config projects.my-test-project.targets.serve.options.port 4201
$ ng serve
** Angular Live Development Server is listening on localhost:4201, open your browser on http://localhost:4201/ **

Legado:

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

ng set defaults.serve.port=4201

Los cambios cambian su .angular.cli.json y agrega la configuración del puerto como se mencionó anteriormente .

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


2
En Angular 6.0, obtengo 'set / get ha quedado en desuso a favor del comando config', por lo que esto ya no funciona.
VanAlbert

2

En cuanto a Angular CLI: 7.1.4 , hay dos formas comunes de lograr cambiar el puerto predeterminado .

No 1

En el angular.json, agregue la --portopción de serveparte y use ng servepara iniciar el servidor.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "demos:build",
    "port": 1337
  },
  "configurations": {
    "production": {
      "browserTarget": "demos:build:production"
    }
  }
},

No 2

En el package.json, agregue la --portopción ay ng serveuse npm startpara iniciar el servidor.

  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 8000",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }, 

1

La respuesta proporcionada por elwyn es correcta. Pero también debe actualizar la configuración del transportador para e2e.

En angular.json,

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

En e2e / protractor.conf.js

exports.config = {
    allScriptsTimeout: 11000,
    specs: [
        './src/**/*.e2e-spec.ts'
    ],
    capabilities: {
        'browserName': 'chrome'
    },
    directConnect: true,
    baseUrl: 'http://localhost:9000/'
}

0

Puede haber una situación en la que desee utilizar la variable de entorno NodeJS para especificar el puerto del servidor de desarrollo de CLI angular. Una de las posibles soluciones es mover el servidor de desarrollo CLI que se ejecuta en un script NodeJS separado, que leerá el valor del puerto (por ejemplo, del archivo .env) y lo usará ejecutándose ng servecon el portparámetro:

// run-env.js
const dotenv = require('dotenv');
const child_process = require('child_process');

const config = dotenv.config()
const DEV_SERVER_PORT = process.env.DEV_SERVER_PORT || 4200;

const child = child_process.exec(`ng serve --port=${DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));

Luego puede a) ejecutar este script directamente a través de node run-env, b) ejecutarlo a través de npm actualizando package.json, por ejemplo

"scripts": {
  "start": "node run-env"
}

run-env.jsdebería comprometerse con el repositorio, .envno debería. Se pueden encontrar más detalles sobre el enfoque en esta publicación: Cómo cambiar el puerto del servidor de desarrollo de CLI angular a través de .env .

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.