问题
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 port 4200.
回答1:
Update for @angular/cli@6.x: and over
In the new angular.json
you now specify a port per "project"
"projects": {
"my-cool-project": {
... rest of project config omitted
"architect": {
"serve": {
"options": {
"port": 1337
}
}
}
}
}
All options available:
https://github.com/angular/angular-cli/wiki/angular-workspace
Alternatively, you may specify the port each time when running ng serve like this:
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 angular-cli@1.0.0-beta.22-1
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
}
回答2:
In Angular 2 cli@2.3.1,
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.
回答3:
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
回答4:
You can now specify the port in the .angular-cli.json under the defaults:
"defaults": {
"styleExt": "scss",
"serve": {
"port": 8080
},
"component": {}
}
Tested in angular-cli v1.0.6
回答5:
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.
回答6:
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"
},
回答7:
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/'
}
来源:https://stackoverflow.com/questions/37154813/angular-cli-server-how-to-specify-default-port