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

166

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
cre8
fonte

Respostas:

233

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"
    }
  }
}
Tobias J
fonte
7
Para facilitar, você pode especificar, em 0.0.0.0vez do IP do host, para escutar em todos os dispositivos Ethernet. Dessa forma, o host local e o endereço IP público podem ser usados.
dman
O VS2017 parece ignorar a configuração da porta por algum motivo estranho, mas usei esse truque com a adição do @dman (0.0.0.0 como host) para pelo menos ativar as conexões remotas.
Ola Berntsson
4
Parece que as coisas mudaram nas versões recentes da CLI (estou usando a versão 6). Veja aqui para mais detalhes .
Nathan Friend
Existe uma maneira de tornar esse ambiente de configuração específico?
Pankaj 12/02
71

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.

Brocco
fonte
desculpe, foo.bar, consulte o quê? UPDATE: eu removi e funciona, mas não sei.
Muhammed Moussa
32

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

Shreekant N
fonte
29

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
                }
            }
        }
        ...
    }
}
arsanyf
fonte
1
Trabalhou para mim com @ angular / cli versão 6.1.5
PHEDev
1
Trabalhou para mim com a versão angular / cli 7.0.6 #
Kerry Jones
16

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.

Mwiza
fonte
A --port 0 informação foi boa, mas não tenho certeza de que responde à pergunta.
Ash
Gostei da opção --port 0 que auto atribuiu a porta disponível para uso ...
vinsinraw
A pergunta especificamente como configurá-lo em um arquivo de configuração
Ojonugwa Jude Ochalifu
11

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
    },
Satyendra Patel
fonte
4
Você não deseja substituir ou alterar os arquivos de origem. angular.json é a maneira correta de substituir os padrões do esquema, conforme mencionado na resposta aceita.
Bjørn Lindner 30/11
5

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

insira a descrição da imagem aqui

Manjericão
fonte
3

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

  1. 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).

Sankeerth Mahurkar
fonte
0

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

John Dugger
fonte
0

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.

Shahbaz Ali Khan
fonte
0

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)
Kim T
fonte