Como alterar a porta angular de 4200 para outra

Eu quero usar 5000 em vez de 4200 ..

O que eu tentei é que criei um arquivo no nome da raiz ember-clie coloquei o JSON de acordo com o código abaixo:

{
   "port": 5000
}

Mas meu aplicativo ainda roda em 4200 em vez de 5000

A solução funcionou para mim foi

ng serve --port 4401    

(Você pode alterar 4401 para o número que desejar)

Em seguida, inicie o navegador -> http: // localhost: 4401 /

Basicamente, eu estava tendo dois aplicativos e, com a ajuda da abordagem acima, agora sou capaz de executá-los simultaneamente no meu ambiente de desenvolvimento.

Você pode alterar a porta do aplicativo digitando o seguinte comando,

ng servir --port 4200

Além disso, para uma configuração permanente, você pode alterar a porta editando o arquivo angular-cli.json

 "defaults": {
    "serve": {
      "port": 8080
    }
  }

Parece que as coisas mudaram nas versões recentes da CLI (estou usando 6.0.1). Consegui alterar a porta padrão usada ng serveadicionando uma portopção ao projeto angular.json:

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

(Somente propriedades relevantes são mostradas neste exemplo.)

Mudar nodel_modules/angular-cli/commands/server.jsé uma má idéia, pois será atualizado quando você instalar uma nova versão do angular-cli. Em vez disso, você deve especificar ng serve --port 5000 da package.jsonseguinte maneira:

"scripts": {
    "start": "ng serve --port 5000"
}

Você também pode especificar o host com --host 127.0.0.1

O local para as configurações da porta mudou algumas vezes.

Se estiver usando a CLI angular 1

mudança angular-cli.json

{
  "defaults": {
    "serve": {
      "host": "0.0.0.0",
      "port": 5000 
    }
  }
}

Se estiver usando a CLI Angular mais recente

mudança angular.json

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "0.0.0.0",
                  "port": 5000
                }
            }
        }
        ...
    }
}

Sem alterar nenhum arquivo

Execute o comando

ng serve --host 0.0.0.0 --port 5000

Ninguém atualizou a resposta para a mais recente CLI angular. Angular CLI

Com latest versionangular-cli no qual angular-cli.json foi renomeado angular.json, você pode alterar a porta editando o angular.jsonarquivo que agora especifica uma porta por"project"

projects": {
    "my-cool-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4500
                }
            }
        }
    }
}

Leia mais sobre isso here

Eu normalmente uso o ng setcomando para alterar as configurações da CLI Angular para o nível do projeto.

ng set defaults.serve.port=4201

Ele altera o seu .angular.cli.jsone adiciona as configurações de porta, como mencionado anteriormente .

Após essa alteração, você pode usar simplesmente ng servee ela usará a porta preferida sem a necessidade de especificá-la sempre.

você também pode inserir o comando abaixo em seu CLI angular, onde normalmente insere npm start

ng serve --host "endereço IP" --port "número da porta"

você também pode escrever este comando: ng serve -p 5000

saltar para este arquivo

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

e porta de pesquisa

"port": {
  "type": "number",
  "description": "Port to listen on.",
  "default": 4200
},

altere o valor padrão como desejar e reinicie o servidor

• Para permanente:

  Goto nodel_modules / angular-cli / comandos / server.js pesquisar var DefaultPort = process.env.PORT || 4200; e altere 4200 para o que desejar.

• Para executar agora:

  ng serve --port 4500 (Você altera 4500 para qualquer número que queira usar como sua porta)

Não é recomendável alterar os módulos do nó, pois as atualizações ou a reinstalação podem remover essas alterações. Tão melhor mudar no cli angular

Angular 9 em angular.json

{
    "projects": {
            "targets": {
                "serve": {
                    "options": {
                         "port": 5000
                     }
                }     
            }     
    }
}  

Você pode editar o número da porta padrão configurado no arquivo serve.js.

Caminho será project_direcory/node_modules/angular-cli/commands/serve.js.

Procure por esta linha -> var defaultPort = process.env.PORT || 4200;
Substitua por esta linha ->var defaultPort = process.env.PORT || 5000;

simplesmente corra ng serve --port 5000 --open

Execute o comando abaixo para outro que não seja 4200

ng serve --port 4500

Em angular.json:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
          "browserTarget": "projectname:build",
          "port": 5000
         }

Eu estou usando angular-cli. Isso funcionou para mim.

em angular 2 ++.

Para alterar a porta, você pode executar o comando abaixo no terminal:

ng serve --host 0.0.0.0 --port 5000.

Embora já existam inúmeras soluções válidas nas respostas acima, aqui está um guia visual e uma solução específica para projetos do Angular 7 (possivelmente versões anteriores também, sem garantias) usando o Visual Studio Code. Localize o schema.json nos diretórios conforme mostrado na árvore de imagens e altere o número inteiro em port -> default para uma mudança permanente de porta no navegador.

Vá para o angular.jsonarquivo

Procure pela palavra-chave "servir":

Adicione a portpalavra-chave como mostrado abaixo:

 "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
         "browserTarget": "my-new-angular-app:build",
         "port": 3001
     },
     ...

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

Primeira maneira de comando cli:

ng serve --port 2400 --open

A segunda maneira é através da configuração no local: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Faça alterações no schema.jsonarquivo.

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

Apenas corra

ng serve --port yourport

Exemplo:

ng serve --port 4401

O código funcionou para mim foi o seguinte

ng serve --port ABCD

Por exemplo

ng serve --port 6300

Para executar e abrir no navegador, use automaticamente a bandeira -openou apenas-o

ng serve -o --port 4200

Nota: A porta 4200 é arbitrária. Pode ser qualquer porta de sua escolha

Se você deseja usar a variável de ambiente NodeJS para configurar o valor da porta do servidor de desenvolvimento Angular CLI, a seguinte abordagem é possível:

• crie o script NodeJS, que terá acesso à variável de ambiente (por exemplo, DEV_SERVER_PORT) e poderá ser executado ng servecom o --portvalor do parâmetro extraído dessa variável ( child_process pode ser nosso amigo aqui):

const child_process = require('child_process');
const child = child_process.exec(`ng serve --port=${process.env.DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));

• atualize o package.json para fornecer esse script em execução via npm
• não esqueça de configurar a DEV_SERVER_PORTvariável de ambiente (pode ser feita via dotenv )

Aqui está também a descrição completa dessa abordagem: Como alterar a porta do servidor de desenvolvimento da CLI angular via .env .

Isso abrirá automaticamente sua janela também

ng serve -o --port 4801