Set default host and port for ng serve in config file
AngularAngular CliAngular Problem Overview
I want to know if i can set a host and a port in a config file so I don't have to type
ng serve --host foo.bar --port 80
instead of just
ng serve
Angular Solutions
Solution 1 - Angular
Angular CLI 6+
In the latest version of Angular, this is set in the angular.json
config file. Example:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"projects": {
"my-project": {
"architect": {
"serve": {
"options": {
"port": 4444
}
}
}
}
}
}
You can also use ng config
to view/edit values:
ng config projects["my-project"].architect["serve"].options {port:4444}
Angular CLI <6
In previous versions, this was set in angular-cli.json
underneath the defaults
element:
{
"defaults": {
"serve": {
"port": 4444,
"host": "10.1.2.3"
}
}
}
Solution 2 - Angular
As of right now that feature is not supported, however if this is something that bothers you an alternative would be in your package.json...
"scripts": {
"start": "ng serve --host foo.bar --port 80"
}
This way you can simply run npm start
Another option if you want to do this across multiple projects is to create an alias, which you can potentially name ngserve
which will execute your above command.
Solution 3 - Angular
You can configure the default HTTP port and the one used by the LiveReload server with two command-line options :
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
Solution 4 - Angular
This changed in the latest Angular CLI.
The file name changed to angular.json
, and the structure also changed.
This is what you should do:
"projects": {
"project-name": {
...
"architect": {
"serve": {
"options": {
"host": "foo.bar",
"port": 80
}
}
}
...
}
}
Solution 5 - Angular
Another option is to run ng serve
command with the --port
option e.g
ng serve --port 5050
(i.e for port 5050)
Alternatively, the command: ng serve --port 0
, will auto assign an available port for use.
Solution 6 - Angular
We have two ways to change default port number in Angular.
First way is by CLI command:
ng serve --port 2400 --open
Second way is by configuration at the location:
ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.
Make changes in schema.json file.
{
"title": "Dev Server Target",
"description": "Dev Server target options for Build Facade.",
"type": "object",
"properties": {
"browserTarget": {
"type": "string",
"description": "Target to serve."
},
"port": {
"type": "number",
"description": "Port to listen on.",
"default": 2400
},
Solution 7 - Angular
If you are planning to run the angular project in custom host/IP and Port there is no need of making changes in config file
The following command worked for me
ng serve --host aaa.bbb.ccc.ddd --port xxxx
Where,
aaa.bbb.ccc.ddd --> IP you want to run the project
xxx --> Port you want to run the project
Example
ng serve --host 192.168.322.144 --port 6300
Result for me was
Solution 8 - Angular
You can save these in a file, but you have to to put it in .ember-cli
(at the moment, at least); see https://github.com/angular/angular-cli/issues/1156#issuecomment-227412924
{
"port": 4201,
"liveReload": true,
"host": "dev.domain.org",
"live-reload-port": 49153
}
edit: you can now set these in angular-cli.json as of commit https://github.com/angular/angular-cli/commit/da255b0808dcbe2f9da62086baec98dacc4b7ec9, which is in build 1.0.0-beta.30
Solution 9 - Angular
If your are on windows you can do it this way :
- In your project root directory, Create file run.bat
- Add your command with your choice of configurations in this file. For Example
> ng serve --host 192.168.1.2 --open
- Now you can click and open this file whenever you want to serve.
This not standard way but comfortable to use (which I feel).
Solution 10 - Angular
If you want to specifically have your local ip address open when running ng serve you can do the following:
npm install internal-ip-cli --save-dev
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)
Solution 11 - Angular
here is what i put into package.json (running angular 6):
{
"name": "local-weather-app",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --port 5000",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Then a plain npm start will pull in the contents of start. Could also add other options to contents
Solution 12 - Angular
Only one thing you have to do. Type this in in your Command Prompt: ng serve --port 4021 [or any other port you want to assign eg: 5050, 5051 etc ]. No need to do changes in files.
Solution 13 - Angular
Setting up local name-resolution with /etc/hosts
isn't too much effort.
- In order to open the
hosts
file for editing, run:sudo nano /etc/hosts
. - Then set up a local host-name in there, eg:
127.0.0.1 localho.st
Then one can configure the architect
> serve
section within angular.json
:
"options": {
"browserTarget": "app:build",
"liveReload": true,
"host": "localho.st",
"port": 8100
},
And one might also want to change the hostname
in package.json
:
ng run app:serve --host=localho.st --port=8100