So ändern Sie den Winkelanschluss von 4200 auf einen anderen

254

Ich möchte 5000 anstelle von 4200 verwenden.

Was ich versucht habe, ist, dass ich eine Datei mit dem Stammnamen erstellt ember-cliund JSON gemäß dem folgenden Code eingefügt habe:

{
   "port": 5000
}

Aber meine App läuft immer noch auf 4200 statt 5000

Ashutosh Jha
quelle
2
Mögliches Duplikat stackoverflow.com/questions/37154813/…
Zac Grierson
Hast du auch den Server neu gestartet?
Kris
ja @kristjanreinhold
Ashutosh Jha
Beantwortet das deine Frage?
Angular-Cli

Antworten:

426

Die Lösung für mich war

ng serve --port 4401    

(Sie können 4401 auf eine beliebige Nummer ändern.)

Starten Sie dann den Browser -> http: // localhost: 4401 /

Grundsätzlich hatte ich zwei Anwendungen und mit Hilfe des oben beschriebenen Ansatzes kann ich jetzt beide gleichzeitig in meiner Entwicklungsumgebung ausführen.

David
quelle
Die Option '--port 4201' ist nicht beim Aufschlagbefehl
holms
5
Nebenbemerkung für andere: Nicht tun, npm start --port 4401weil npm startder --port
Jordec
1
Bitte sehen Sie auch diese Antwort stackoverflow.com/a/52345586/3209545
callee.args
Nur eine Ergänzung, können Sie gleichzeitig die ng serve --port 4401 --open
bereitgestellte
114

Sie können Ihren Anwendungsport ändern, indem Sie den folgenden Befehl eingeben:

ng dienen --port 4200

Für eine dauerhafte Einrichtung können Sie den Port auch ändern, indem Sie die Datei angle-cli.json bearbeiten

 "defaults": {
    "serve": {
      "port": 8080
    }
  }
Ganesh Kalje
quelle
2
In neueren Versionen sollten Sie ng serve --port 8080 verwenden (kein ":", stattdessen Leerzeichen).
Julian L.
Wenn dies die letzte "Standardeinstellung" ist, sollten Sie das nachfolgende Komma
Oswaldo Salazar
1
Dies hat sich in den letzten Versionen der CLI geändert. Weitere Informationen finden Sie in meiner Antwort.
Nathan Friend
98

Es scheint, dass sich die Dinge in den letzten Versionen der CLI (die ich verwende 6.0.1) geändert haben . Ich konnte den verwendeten Standardport ändern, ng serveindem portich meinem Projekt eine Option hinzufügte angular.json:

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

(In diesem Beispiel werden nur relevante Eigenschaften angezeigt.)

Nathan Freund
quelle
Und ich möchte auch dann den Gastgeber wechseln
Kunvar Singh
Dies ist die wirklich richtige dauerhafte Antwort
WtFudgE
59

Das Ändern nodel_modules/angular-cli/commands/server.jsist eine schlechte Idee, da es aktualisiert wird, wenn Sie eine neue Version von installieren angular-cli. Stattdessen sollten Sie angeben --port 5000 dienen ng in package.jsonetwa so aus :

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

Sie können den Host auch mit --host 127.0.0.1 angeben

Dhyey
quelle
Wie starte ich die App? ng serve? Scheint nicht zu funktionieren, wenn ich im Browser einchecke mitlocalhost:5000
Ashish Ranjan
1
Ich denke, das sollte die akzeptierte Antwort sein. Fast für Leute, die npm startals Kommando dienen
Blobmaster
Warum eine Skriptoption für die permanente Konfiguration verwenden? Es gibt eine Datei dafür, und es istangular.json
Mozgor
59

Der Speicherort für die Porteinstellungen hat sich einige Male geändert.

Bei Verwendung von Angular CLI 1

Veränderung angular-cli.json

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

Bei Verwendung der neuesten Angular CLI

Veränderung angular.json

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

Ohne eine Datei zu ändern

Führen Sie den Befehl aus

ng serve --host 0.0.0.0 --port 5000
arsanyf
quelle
8
Dies sollte als die richtige Antwort angesehen werden, da es beide Möglichkeiten abdeckt: dauerhafte oder vorübergehende Lösungen.
Daniel Santana
1
Ich stimme @Dan
marknt15
Wissen Sie bei dauerhaften Änderungen, ob der neue Port an anderer Stelle in dieser Datei "angle.json" angegeben werden soll? Meine serveOption Ebene enthält zwei Elemente mit browserTarget, optionsund configurations/production. Sollte ich diesen neuen portEintrag in beiden oder nur in dem optionseinen hinzufügen ?
Mozgor
19

Niemand hat die Antwort für die neueste Angular CLI aktualisiert. Mit der neuesten Angular CLI

Mit latest versionvon angle-cli, in das angle-cli.json umbenannt wurde, angular.jsonkönnen Sie den Port ändern, indem angular.jsonSie die Datei bearbeiten , für die Sie jetzt einen Port angeben"project"

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

Lesen Sie mehr darüber here

Sajeetharan
quelle
Was ist mit dem Eintrag "Serve / Konfigurationen / Produktion", der auch einen browserTargetEintrag enthält , genauso wie serve / optionswir den neuen hinzufügen port?
Mozgor
1
Die beste Antwort für die neueste Version von Angular CLI
Dacomis
14

Normalerweise verwende ich den ng setBefehl, um die Angular CLI-Einstellungen für die Projektebene zu ändern.

ng set defaults.serve.port=4201

Es ändert Änderungen .angular.cli.jsonund fügt die Porteinstellungen hinzu, wie bereits erwähnt .

Nach dieser Änderung können Sie einfach verwenden ng serveund den bevorzugten Port verwenden, ohne ihn jedes Mal angeben zu müssen.

csikosjanos
quelle
get / set scheint zugunsten von config in 6.0 veraltet zu sein, daher funktioniert dies nicht mehr.
VanAlbert
10

Sie können auch den folgenden Befehl in Ihre Winkel-CLI eingeben, in der Sie normalerweise npm start eingeben

ng dienen --host "IP-Adresse" --port "Portnummer"

Ajitesh Jaiswal
quelle
7

Sie können diesen Befehl auch schreiben: ng serve -p 5000

Sara Vaseei
quelle
1
OK. Es ist kurze Hand Syntex. Großartig
Ashutosh Jha
Ich hatte es in Winkel 4 verwendet!
Sara Vaseei
6

gehe zu dieser Datei

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

und Suchport

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

Ändern Sie den Standardwert nach Belieben und starten Sie den Server neu

Sohail Ahmad
quelle
Funktioniert für mich, muss nur beachtet werden, um die erwähnte Datei zu ändern und nicht die andere - node_modules/@angular/cli/lib/config/schema.json die die gleiche Eigenschaft enthält.
Lingar
5
  • Für Permanent:

    Goto nodel_modules / Winkel-cli / Befehle / server.js Suche nach var Default = process.env.PORT || 4200; und ändern Sie 4200 auf alles andere, was Sie wollen.

  • Jetzt ausführen:

    ng serve --port 4500 (Sie ändern 4500 in eine beliebige Nummer, die Sie als Port verwenden möchten.)

Deepak Swain
quelle
1
Ich halte es nicht für node_moduleseine gute Praxis, den Inhalt eines lokal installierten Pakets zu ändern .
Bruno Brant
5

Es wird nicht empfohlen, die Knotenmodule zu ändern, da durch Aktualisierungen oder Neuinstallationen diese Änderungen möglicherweise entfernt werden. Also besser in eckigen Cli ändern

Winkel 9 in angle.json

{
    "projects": {
            "targets": {
                "serve": {
                    "options": {
                         "port": 5000
                     }
                }     
            }     
    }
}  
Shyam
quelle
4

Sie können die Standardportnummer bearbeiten, die in der Datei serve.js konfiguriert ist.

Pfad wird sein project_direcory/node_modules/angular-cli/commands/serve.js.

Nach dieser Zeile suchen -> Durch var defaultPort = process.env.PORT || 4200;
diese Zeile ersetzen ->var defaultPort = process.env.PORT || 5000;

Amruth LS
quelle
4
Wenn Sie dies lesen und dies in Erwägung ziehen, bearbeiten Sie niemals Abhängigkeitsdateien.
Emix
4

einfach laufen ng serve --port 5000 --open

Daniel Torres Laserna
quelle
4

Führen Sie den folgenden Befehl für andere als 4200 aus

ng serve --port 4500
Sagar Jadhav
quelle
4

In angle.json:

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

Ich benutze Angular-Cli. Das hat bei mir funktioniert.

Deepak Singla
quelle
4

im Winkel 2 ++.

Um den Port zu ändern, können Sie den folgenden Befehl im Terminal ausführen:

ng serve --host 0.0.0.0 --port 5000.
Nitya nand
quelle
2

Obwohl die obigen Antworten bereits zahlreiche gültige Lösungen enthalten, finden Sie hier eine visuelle Anleitung und eine spezifische Lösung für Angular 7-Projekte (möglicherweise auch frühere Versionen, jedoch keine Garantien), die Visual Studio Code verwenden. Suchen Sie die Datei schema.json in den Verzeichnissen, wie in der Bildstruktur gezeigt, und ändern Sie die Ganzzahl unter Port -> Standard für eine dauerhafte Änderung des Ports im Browser.

Geben Sie hier die Bildbeschreibung ein

themightyhulk
quelle
@ s34N Freut mich das zu hören. Wenn die Antwort hilfreich war, denken Sie bitte daran, eine positive Bewertung für den Beitrag abzugeben, falls dies noch nicht geschehen ist. Danke Kumpel.
themightyhulk
2

Zur angular.jsonDatei gehen,

Suchen Sie nach dem Schlüsselwort "dienen":

Fügen Sie das portSchlüsselwort wie unten gezeigt hinzu:

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

Wir haben zwei Möglichkeiten, die Standardportnummer in Angular zu ändern.

Erster Weg zum Befehl cli:

ng serve --port 2400 --open

Der zweite Weg ist durch Konfiguration am Standort : ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Nehmen Sie Änderungen an der schema.jsonDatei vor.

{
 "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
quelle
Es wird nicht empfohlen, Dateien in node_modules zu ändern, die nach der Neuinstallation des Pakets möglicherweise überschrieben werden. Eine sehr gute Lösung präsentierte Sajeetharan.
Daniel Santana
1

Renn einfach

ng dienen --portieren Sie Ihren Hafen

Beispiel:

ng serve --port 4401

Akitha_MJ
quelle
1

Der Code, der für mich funktionierte, war wie folgt

ng serve --port ABCD

Beispielsweise

ng serve --port 6300
Basil Mohammed
quelle
0

Zum Ausführen und Öffnen im Browser verwenden Sie automatisch das Flag -openoder einfach-o

ng serve -o --port 4200

Hinweis: Der Port 4200 ist beliebig. Es kann jeder Hafen Ihrer Wahl sein

Fouad Boukredine
quelle
0

Wenn Sie die Umgebungsvariable NodeJS verwenden möchten, um den Wert des Ports des Angular CLI-Entwicklungsservers festzulegen, ist folgender Ansatz möglich:

  • Erstellen Sie ein NodeJS-Skript, das Zugriff auf die Umgebungsvariable hat (z. B. DEV_SERVER_PORT) und ng servemit einem --portParameterwert ausgeführt werden kann, der aus dieser Variablen stammt ( child_process könnte hier unser Freund sein):
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()));
  • Aktualisieren Sie package.json, um dieses Skript bereitzustellen, das über npm ausgeführt wird
  • Vergessen Sie nicht, die DEV_SERVER_PORTUmgebungsvariable einzurichten (kann über dotenv erfolgen ).

Hier ist auch die vollständige Beschreibung dieses Ansatzes: So ändern Sie den Port des Angular CLI Development Server über .env .

Dhilt
quelle
0

Dadurch wird auch Ihr Fenster automatisch geöffnet

ng serve -o --port 4801
Rusty Shackleford
quelle