Definir host e porta padrão para ng servir no arquivo de configuração

Quero saber se posso definir um host e uma porta em um arquivo de configuração para não precisar digitar

ng serve --host foo.bar --port 80

em vez de apenas

ng serve

CLI angular 6+

Na versão mais recente do Angular, isso é definido no o angular.jsonarquivo de configuração . Exemplo:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "projects": {
        "my-project": {
            "architect": {
                "serve": {
                    "options": {
                        "port": 4444
                    }
                }
            }
        }
    }
}

Você também pode usarng config para visualizar / editar valores:

ng config projects["my-project"].architect["serve"].options {port:4444}

CLI angular <6

Nas versões anteriores, isso era definidoangular-cli.json abaixo do defaultselemento:

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "10.1.2.3"
    }
  }
}

No momento, esse recurso não é suportado, no entanto, se isso é algo que incomoda você, uma alternativa estaria no seu package.json ...

"scripts": {
  "start": "ng serve --host foo.bar --port 80"
}

Dessa forma, você pode simplesmente executar npm start

Outra opção, se você quiser fazer isso em vários projetos, é criar um alias, que você pode nomear potencialmente, ngserveque executará o comando acima.

Você pode configurar a porta HTTP padrão e a usada pelo servidor LiveReload com duas opções de linha de comando:

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

https://github.com/angular/angular-cli

Isso mudou na última CLI angular.

O nome do arquivo foi alterado para angular.jsone a estrutura também foi alterada.

Isto é o que você deve fazer:

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "foo.bar",
                  "port": 80
                }
            }
        }
        ...
    }
}

Outra opção é executar o ng servecomando com a --portopção por exemplo

ng serve --port 5050 (ou seja, para a porta 5050)

Como alternativa, o comando ng serve --port 0:, atribuirá automaticamente uma porta disponível para uso.

Temos duas maneiras de alterar o número da porta padrão no Angular.

A primeira maneira é pelo comando da CLI:

ng serve --port 2400 --open

A segunda maneira é por configuração no local:

ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Faça alterações no arquivo schema.json.

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

Você pode salvá-los em um arquivo, mas é necessário inseri-lo .ember-cli(no momento, pelo menos); consulte https://github.com/angular/angular-cli/issues/1156#issuecomment-227412924

{
"port": 4201,
"liveReload": true,
"host": "dev.domain.org",
"live-reload-port": 49153
}

edit: agora você pode configurá-los no angular-cli.json a partir do commit https://github.com/angular/angular-cli/commit/da255b0808dcbe2f9da62086baec98dacc4b7ec9 , que está no build 1.0.0-beta.30

Se você planeja executar o projeto angular em host / IP e porta personalizados, não há necessidade de fazer alterações no arquivo de configuração

O comando a seguir funcionou para mim

ng serve --host aaa.bbb.ccc.ddd --port xxxx

Onde,

aaa.bbb.ccc.ddd --> IP you want to run the project
xxx --> Port you want to run the project

Exemplo

ng serve --host 192.168.322.144 --port 6300

O resultado para mim foi

Se você estiver no Windows, faça isso da seguinte maneira:

1. No diretório raiz do projeto, crie o arquivo run.bat
2. Inclua seu comando com sua escolha de configurações neste arquivo. Por exemplo

ng serve --host 192.168.1.2 --open

3. Agora você pode clicar e abrir esse arquivo sempre que desejar veicular.

Isso não é padrão, mas é confortável de usar (o que eu sinto).

Aqui está o que eu coloquei no package.json (executando o 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"
  },

Então, um npm start simples puxará o conteúdo do start. Também pode adicionar outras opções ao conteúdo

insira a descrição da imagem aqui

Apenas uma coisa você tem que fazer. Digite isso no prompt de comando: ng serve --port 4021 [ou qualquer outra porta que você deseja atribuir, por exemplo: 5050, 5051 etc]. Não há necessidade de fazer alterações nos arquivos.

Se você deseja especificamente abrir seu endereço IP local ao executar o ng serve, faça o seguinte:

npm install internal-ip-cli --save
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)