Using angular-cli with the ng serve command, how can I specify a default port so I do not need to manually pass the --port flag every time?
I'd like to change from the default port 4200.
144
votes
9 Answers
252
votes
Update for @angular/[email protected]: and over
In angular.json you can specify a port per "project"
"projects": {
"my-cool-project": {
... rest of project config omitted
"architect": {
"serve": {
"options": {
"port": 1337
}
}
}
}
}
All options available:
https://angular.io/guide/workspace-config#project-tool-configuration-options
Alternatively, you may specify the port each time when running ng serve like this:
ng serve --port 1337
With this approach you may wish to put this into a script in your package.json to make it easier to run each time / share the config with others on your team:
"scripts": {
"start": "ng serve --port 1337"
}
Legacy:
Update for @angular/cli final:
Inside angular-cli.json you can specify the port in the defaults:
"defaults": {
"serve": {
"port": 1337
}
}
Legacy-er:
Tested in [email protected]
The server in angular-cli comes from the ember-cli project.
To configure the server, create an .ember-cli file in the project root. Add your JSON config in there:
{
"port": 1337
}
Restart the server and it will serve on that port.
There are more options specified here: http://ember-cli.com/#runtime-configuration
{
"skipGit" : true,
"port" : 999,
"host" : "0.1.0.1",
"liveReload" : true,
"environment" : "mock-development",
"checkForUpdates" : false
}
75
votes
In Angular 2 [email protected],
To run a new project on the different port, one way is to specify the port while you run ng serve command.
ng serve --port 4201
or the other way, you can edit your package.json file scripts part and attached the port to your start variable like I mentioned below and then simply run "npm start"
"scripts": {
"ng": "ng",
"start": "ng serve --port 4201",
... : ...,
... : ....
}
this way is much better where you don't need to define port explicitly every time.
14
votes
Use npm scripts instead... Edit your package.json and add the command to 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 execute npm start
8
votes
3
votes
For @angular/cli v6.2.1
The project configuration file angular.json is able to handle multiple projects (workspaces) which can be individually served.
ng config projects.my-test-project.targets.serve.options.port 4201
Where the my-test-project part is the project name what you set with the ng new command just like here:
$ 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/ **
Legacy:
I usually use the ng set command to change the Angular CLI settings for project level.
ng set defaults.serve.port=4201
It changes change your .angular.cli.json and adds the port settings as it mentioned earlier.
After this change you can use simply ng serve and it going to use the prefered port without the need of specifying it every time.
2
votes
As far as Angular CLI: 7.1.4, there are two common ways to achieve changing the default port.
No. 1
In the angular.json, add the --port option to serve part and use ng serve to start the server.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demos:build",
"port": 1337
},
"configurations": {
"production": {
"browserTarget": "demos:build:production"
}
}
},
No. 2
In the package.json, add the --port option to ng serve and use npm start to start the server.
"scripts": {
"ng": "ng",
"start": "ng serve --port 8000",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
2
votes
The answer provided by elwyn is correct. But you should also update protractor config for e2e.
In angular.json,
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"port": 9000,
"browserTarget": "app:build"
}
}
In e2e/protractor.conf.js
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:9000/'
}
0
votes
There might be a situation when you want to use NodeJS environment variable to specify Angular CLI dev server port. One of the possible solution is to move CLI dev server running into a separate NodeJS script, which will read port value (e.g from .env file) and use it executing ng serve with port parameter:
// 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()));
Then you may a) run this script directly via node run-env, b) run it via npm by updating package.json, for example
"scripts": {
"start": "node run-env"
}
run-env.js should be committed to the repo, .env should not. More details on the approach can be found in this post: How to change Angular CLI Development Server Port via .env.
0
votes
For Angular Version 12 this worked for me. In angular.json update like this
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angular-website:build:production"
},
"development": {
"browserTarget": "angular-website:build:development",
"port": 5000
}
},
"defaultConfiguration": "development"
},
