Angular-cli server - how to specify default port

Question

Using angular-cli with the ng serve command, how can I specify the default port, so I don’t have to manually pass the --port flag every time?

Answer 1

Update for @ angular / cli final: Inside angular-cli.json you can specify the default port:

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

---

Legacy:

Tested at angular -cli@1.0.0-beta.22-1

The server in angular-cli comes from the ember-cli . To configure the server, create the .ember-cli in the project root. Add the JSON configuration there:

 { "port": 1337 } 

Reboot the server and it will work on this port.

More options are listed here: http://ember-cli.com/#runtime-configuration

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

Answer 2

In Angular 2 cli@2.3.1,

To start a new project on a different port, one way is to specify the port during the ng serve command.

 ng serve --port 4201 

or in another way, you can edit part of the package.json script files and connect the port to your start variable, as I said below, and then just run "npm start"

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

this method is much better when you do not need to explicitly specify a port each time.

Answer 3

Use npm scripts instead ... Edit the .json package and add the command to the script section.

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

Then just do npm start

Answer 4

Now you can specify the port in .angular-cli.json by default:

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

Tested in angular-cli v1.0.6