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

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.

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 [email protected]

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
}

En Angular 2 [email protected],

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.

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

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

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.

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

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

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 .