Jak zmienić port kątowy z 4200 na dowolny inny

254

Chcę użyć 5000 zamiast 4200 ..

Próbowałem utworzyć plik o nazwie root ember-clii umieścić JSON zgodnie z poniższym kodem:

{
   "port": 5000
}

Ale moja aplikacja nadal działa na 4200 zamiast 5000

Ashutosh Jha
źródło
2
Możliwe zduplikowanie stackoverflow.com/questions/37154813/...
Zac Grierson
Czy zrestartowałeś również serwer?
kris
tak @kristjanreinhold
Ashutosh Jha
Czy to odpowiada na twoje pytanie?
angular

Odpowiedzi:

426

Rozwiązaniem było dla mnie

ng serve --port 4401    

(Możesz zmienić 4401 na dowolny numer)

Następnie uruchom przeglądarkę -> http: // localhost: 4401 /

Zasadniczo miałem dwie aplikacje i dzięki powyższemu podejściu mogę teraz uruchomić obie z nich jednocześnie w moim środowisku programistycznym.

David
źródło
Opcja „--port 4201” nie jest zarejestrowana w poleceniu serw
holms
5
sidenote dla innych: nie rób, npm start --port 4401bo npm startnie wykonuje polecenia --port
Jordec
1
Zobacz również tę odpowiedź stackoverflow.com/a/52345586/3209545
callee.args
tylko dodatek, możesz w tym samym czasie otworzyć obsługiwaną aplikację w nowej karcie przeglądarki, dodając ng serve --port 4401 --open
briancollins081
114

Możesz zmienić port aplikacji, wprowadzając następujące polecenie,

ng służyć --port 4200

Ponadto, aby uzyskać stałą konfigurację, możesz zmienić port, edytując plik angular-cli.json

 "defaults": {
    "serve": {
      "port": 8080
    }
  }
ganesh kalje
źródło
2
W nowszych wersjach powinieneś używać ng służyć --port 8080 (bez „:”, zamiast tego spacja).
Julian L.,
Jeśli jest to ostatnie ustawienie domyślne, powinieneś pozbyć się końcowego przecinka
Oswaldo Salazar
1
Zmieniło się to w ostatnich wersjach CLI - więcej szczegółów można znaleźć w mojej odpowiedzi.
Nathan Friend
98

Wygląda na to, że coś się zmieniło w ostatnich wersjach CLI (używam 6.0.1). Byłem w stanie zmienić domyślny port używany ng serveprzez dodanie portopcji do mojego projektu angular.json:

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

(W tym przykładzie pokazano tylko odpowiednie właściwości).

Nathan Friend
źródło
Chcę też zmienić gospodarza
Kunvar Singh
to jest naprawdę właściwa stała odpowiedź
WtFudgE
59

Zmiana nodel_modules/angular-cli/commands/server.jsjest złym pomysłem, ponieważ zostanie zaktualizowana po zainstalowaniu nowej wersji angular-cli. Zamiast tego należy podać ng serw --port 5000 w package.jsonnastępujący sposób:

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

Możesz także określić host za pomocą --host 127.0.0.1

Dhyey
źródło
Jak uruchomić aplikację? ng serve? Wydaje się, że nie działa, gdy sprawdzam w przeglądarce za pomocąlocalhost:5000
Ashish Ranjan,
1
Myślę, że to powinna być zaakceptowana odpowiedź. Prawie dla peaople używającego npm startjako polecenia
blobmaster
Po co używać opcji skryptu do stałej konfiguracji? Jest na to plik i toangular.json
Mozgor
59

Lokalizacja ustawień portu zmieniła się kilka razy.

Jeśli używasz Angular CLI 1

Zmiana angular-cli.json

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

Jeśli używasz najnowszego Angular CLI

Zmiana angular.json

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

Bez zmiany żadnego pliku

Uruchom polecenie

ng serve --host 0.0.0.0 --port 5000
arsanyf
źródło
8
Należy to uznać za prawidłową odpowiedź, ponieważ obejmuje obie możliwości: rozwiązania stałe lub tymczasowe.
Daniel Santana
1
Wyrażam zgodę na @Dan
marknt15
W przypadku trwałych zmian, czy wiesz, czy nowy port powinien być określony gdzie indziej w tym pliku `angular.json`? Mój servepoziom opcji zawiera dwa elementy z browserTarget, optionsi configurations/production. Czy powinienem dodać ten nowy portwpis do obu, czy tylko do optionsjednego?
Mozgor
19

Nikt nie zaktualizował odpowiedzi na najnowszy interfejs Angular CLI Angular CLI

Z latest versionangular-cli, w którym przemianowano na angular-cli.json angular.json, możesz zmienić port, edytując angular.jsonplik, który teraz określasz"project"

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

Przeczytaj więcej na ten temat here

Sajeetharan
źródło
A co z wpisem `serw / konfiguracje / produkcja`, który również zawiera browserTargetwpis, tak samo jak w serve / optionsprzypadku, gdy dodajemy nowy port?
Mozgor
1
Najlepsza odpowiedź dla najnowszej wersji Angular CLI
Dacomis
14

Zwykle używam tego ng setpolecenia do zmiany ustawień Angular CLI dla poziomu projektu.

ng set defaults.serve.port=4201

Zmienia zmiany .angular.cli.jsoni dodaje ustawienia portu, jak wspomniano wcześniej .

Po tej zmianie możesz użyć po prostu ng servei będzie korzystał z preferowanego portu bez konieczności określania go za każdym razem.

csikosjanos
źródło
get / set wydaje się być przestarzałe na korzyść config w wersji 6.0, więc to już nie działa.
VanAlbert
10

możesz również wpisać poniższe polecenie w swoim kątowym pliku cli, gdzie normalnie wpisujesz npm start

ng służyć --host „adres ip” --port „numer portu”

Ajitesh Jaiswal
źródło
7

możesz także napisać to polecenie: ng serve -p 5000

Sara Vaseei
źródło
1
Dobrze. To krótka ręka Syntex. Świetnie
Ashutosh Jha,
Użyłem go w kątowniku 4!
Sara Vaseei
6

mam ten plik

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

i port wyszukiwania

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

zmień wartość domyślną i zrestartuj serwer

Sohail Ahmad
źródło
Działa dla mnie, wystarczy zauważyć, aby zmienić wspomniany plik, a nie drugi - node_modules/@angular/cli/lib/config/schema.json które zawierają tę samą właściwość.
lingar
5
  • Na stałe:

    Idź do nodel_modules / angular-cli / Command / server.js Wyszukaj var defaultPort = process.env.PORT || 4200; i zmień 4200 na cokolwiek chcesz.

  • Aby uruchomić teraz:

    ng służyć --port 4500 (Ty zmieniasz 4500 na dowolną liczbę, której chcesz użyć jako portu)

Deepak swain
źródło
1
Nie sądzę, aby zmiana zawartości pakietu instalowanego lokalnie node_modulesbyła dobrą praktyką.
Bruno Brant
5

Nie zaleca się zmiany modułów węzła, ponieważ aktualizacje lub ponowna instalacja mogą usunąć te zmiany. Więc lepiej zmienić kątowe kliknięcie

Angular 9 w angular.json

{
    "projects": {
            "targets": {
                "serve": {
                    "options": {
                         "port": 5000
                     }
                }     
            }     
    }
}  
Shyam
źródło
4

Możesz edytować domyślny numer portu skonfigurowany w pliku serve.js.

Ścieżka będzie project_direcory/node_modules/angular-cli/commands/serve.js.

Wyszukaj tę linię -> var defaultPort = process.env.PORT || 4200;
Zamień na tę linię ->var defaultPort = process.env.PORT || 5000;

Amruth LS
źródło
4
Jeśli czytasz to i zastanawiasz się nad tym ... proszę, nigdy nie edytuj plików zależności.
emix
4

po prostu biegnij ng serve --port 5000 --open

Daniel Torres Laserna
źródło
4

Uruchom poniżej polecenia dla innych niż 4200

ng serve --port 4500
Sagar Jadhav
źródło
4

W angular.json:

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

Używam kątowego cli. To zadziałało dla mnie.

Deepak Singla
źródło
4

w kącie 2 ++.

Aby zmienić port, możesz uruchomić komendę poniżej w terminalu:

ng serve --host 0.0.0.0 --port 5000.
Nitya nand
źródło
2

Chociaż w powyższych odpowiedziach jest już wiele poprawnych rozwiązań, oto wizualny przewodnik i konkretne rozwiązanie dla projektów Angular 7 (być może także wcześniejszych wersji, ale bez gwarancji) przy użyciu Visual Studio Code. Znajdź plik schema.json w katalogach, jak pokazano w drzewie obrazów, i zmień liczbę całkowitą w polu port -> default, aby trwale zmienić port w przeglądarce.

wprowadź opis zdjęcia tutaj

themightyhulk
źródło
@ s34N Miło to słyszeć. Jeśli odpowiedź była pomocna, pamiętaj, aby wyrazić opinię na temat postu, jeśli jeszcze tego nie zrobiłeś. Dzięki stary.
themightyhulk
2

Idź do angular.jsonpliku

Wyszukaj słowo kluczowe „podaj”:

Dodaj portsłowo kluczowe, jak pokazano poniżej:

 "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
         "browserTarget": "my-new-angular-app:build",
         "port": 3001
     },
     ...
Praveen MB
źródło
1

Istnieją dwa sposoby zmiany domyślnego numeru portu w Angular.

Pierwszy sposób na polecenie cli:

ng serve --port 2400 --open

Drugi sposób polega na konfiguracji w lokalizacji: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json .

Wprowadź zmiany w schema.jsonpliku.

{
 "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
źródło
Nie zaleca się zmiany plików w module_węzła, które mogą zostać zastąpione po ponownej instalacji pakietu. Bardzo dobre rozwiązanie przedstawił Sajeetharan.
Daniel Santana
1

Po prostu biegnij

ng służyć --portuj swój port

Przykład:

ng serve --port 4401

Akitha_MJ
źródło
1

Kod działał dla mnie następująco

ng serve --port ABCD

Na przykład

ng serve --port 6300
Basil Mohammed
źródło
0

Aby uruchomić i otworzyć w przeglądarce, użyj flagi -openlub po prostu-o

ng serve -o --port 4200

Uwaga: Port 4200 jest dowolny. Może to być dowolny wybrany port

Fouad Boukredine
źródło
0

Jeśli chcesz użyć zmiennej środowiskowej NodeJS do skonfigurowania wartości portu serwera deweloperskiego Angular CLI, możliwe jest następujące podejście:

  • utwórz skrypt NodeJS, który będzie miał dostęp do zmiennej środowiskowej (powiedzmy DEV_SERVER_PORT) i mógłby działać ng servez --portwartością parametru pobraną z tej zmiennej ( proces potomny może być naszym przyjacielem tutaj):
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()));
  • zaktualizuj pakiet.json, aby udostępnić ten skrypt działający za pośrednictwem npm
  • nie zapomnij ustawić DEV_SERVER_PORTzmiennej środowiskowej (można to zrobić za pomocą dotenv )

Oto także pełny opis tego podejścia: Jak zmienić port Angular CLI Development Server przez .env .

dilt
źródło
0

Spowoduje to również automatyczne otwarcie okna

ng serve -o --port 4801
Rusty Shackleford
źródło