Come cambiare la porta angolare da 4200 a qualsiasi altra


256

Voglio usare 5000 invece di 4200 ..

Quello che ho provato è che ho creato un file sul nome di root ember-clie ho inserito JSON secondo il codice seguente:

{
   "port": 5000
}

Ma la mia app funziona ancora su 4200 anziché 5000



Hai riavviato anche il server?
Kris,

si @kristjanreinhold
Ashutosh Jha,

Questo risponde alla tua domanda? server
angular

Risposte:


428

La soluzione ha funzionato per me era

ng serve --port 4401    

(Puoi cambiare 4401 con il numero che vuoi)

Quindi avviare il browser -> http: // localhost: 4401 /

Fondamentalmente, avevo due applicazioni e con l'aiuto dell'approccio sopra ora sono in grado di eseguirle entrambe contemporaneamente nel mio ambiente di sviluppo.


L'opzione '--port 4201' non è registrata con il comando serve
holms il

6
sidenote per gli altri: non farlo npm start --port 4401perché npm startnon sembra eseguire --port
Jordec l'

1
Si prega di consultare questa risposta così stackoverflow.com/a/52345586/3209545
callee.args

solo un'aggiunta, puoi allo stesso tempo aprire l'app pubblicata in una nuova scheda del browser aggiungendo ng serve --port 4401 --open
briancollins081

114

È possibile modificare la porta dell'applicazione immettendo il comando seguente,

Servizio --port 4200

Inoltre, per una configurazione permanente è possibile cambiare la porta modificando il file angular-cli.json

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

2
Nelle versioni più recenti dovresti usare ng serve --port 8080 (no ":", spazio vuoto invece).
Julian L.,

Se questa è l'ultima impostazione "predefinita", dovresti sbarazzarti della virgola finale
Oswaldo Salazar,

1
Questo è cambiato nelle ultime versioni della CLI - vedi la mia risposta per maggiori dettagli.
Nathan Friend

98

Sembra che le cose siano cambiate nelle ultime versioni della CLI (sto usando 6.0.1). Sono stato in grado di cambiare la porta predefinita utilizzata ng serveaggiungendo portun'opzione a quella del mio progetto angular.json:

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

(In questo esempio vengono mostrate solo le proprietà pertinenti.)


E voglio cambiare host anche allora
Kunvar Singh

questa è davvero la risposta permanente giusta
WtFudgE

59

Cambiare nodel_modules/angular-cli/commands/server.jsè una cattiva idea in quanto verrà aggiornato quando si installa la nuova versione di angular-cli. Invece dovresti specificare ng serve --port 5000 in package.jsonquesto modo:

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

Puoi anche specificare host con --host 127.0.0.1


Come si avvia l'app? ng serve? Non sembra funzionare quando controllo il browser con,localhost:5000
Ashish Ranjan,

1
Penso che questa dovrebbe essere la risposta accettata. Quasi per la gente che usa npm startcome comando
blobmaster il

Perché utilizzare un'opzione di script per la configurazione permanente? C'è un file per questo, ed èangular.json
Mozgor

59

La posizione per le impostazioni della porta è cambiata un paio di volte.

Se si utilizza la CLI angolare 1

Modificare angular-cli.json

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

Se si utilizza la CLI angolare più recente

Modificare angular.json

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

Senza modificare alcun file

Esegui il comando

ng serve --host 0.0.0.0 --port 5000

8
Questa dovrebbe essere considerata la risposta corretta in quanto copre entrambe le possibilità: soluzioni permanenti o temporanee.
Daniel Santana,

1
Sono d'accordo con @Dan
marknt15 il

In caso di modifiche permanenti, sai se la nuova porta dovrebbe essere specificata altrove in questo file `angular.json`? Il mio servelivello di opzione contiene due elementi con browserTarget, optionse configurations/production. Devo aggiungere questa nuova portvoce in entrambe o solo in optionsquella?
Mozgor,

19

Nessuno ha aggiornato la risposta all'ultima CLI angolare. Con l'ultima Angular CLI

Con latest version angular-cli in cui è stato rinominato angular-cli.json angular.json, puoi cambiare la porta modificando il angular.jsonfile che ora specifichi una porta per"project"

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

Leggi di più al riguardo here


Che dire della voce `serve / configurazioni / produzione` che contiene anche una browserTargetvoce, come nel serve / optionscaso in cui aggiungiamo la nuova port?
Mozgor,

1
La migliore risposta per l'ultima versione di Angular CLI
Dacomis,

14

Di solito utilizzo il ng setcomando per modificare le impostazioni della CLI angolare a livello di progetto.

ng set defaults.serve.port=4201

Cambia cambia .angular.cli.jsone aggiunge le impostazioni della porta come menzionato in precedenza .

Dopo questa modifica puoi usare semplicemente ng servee userà la porta preferita senza la necessità di specificarla ogni volta.


get / set sembra essere deprecato a favore della configurazione in 6.0, quindi non funziona più.
VanAlbert,

10

puoi anche inserire il seguente comando nel tuo cli angolare dove normalmente inserisci npm start

ng serve --host "indirizzo IP" --port "numero porta"



6

vai a questo file

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

e cerca porta

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

modificare il valore predefinito come desiderato e riavviare il server


Funziona per me, ho solo bisogno di notare di cambiare il file menzionato e non l'altro, node_modules/@angular/cli/lib/config/schema.json che contiene la stessa proprietà.
lingar,

5
  • Per permanente:

    Vai a nodel_modules / angular-cli / command / server.js Cerca var defaultPort = process.env.PORT || 4200; e cambia 4200 con qualsiasi altra cosa tu voglia.

  • Per eseguire ora:

    ng serve --port 4500 (modifica 4500 con qualsiasi numero che si desidera utilizzare come porta)


1
Non penso che cambiare il contenuto di un pacchetto installato localmente node_modulessia una buona pratica.
Bruno Brant,

5

Non è consigliabile modificare i moduli del nodo poiché gli aggiornamenti o la reinstallazione potrebbero rimuovere tali modifiche. Quindi meglio cambiare in cli angolare

Angolare 9 in angular.json

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

4

È possibile modificare il numero di porta predefinito configurato nel file serve.js.

Il percorso sarà project_direcory/node_modules/angular-cli/commands/serve.js.

Cerca questa riga -> var defaultPort = process.env.PORT || 4200;
Sostituisci con questa riga ->var defaultPort = process.env.PORT || 5000;


4
Se stai leggendo questo e stai pensando di farlo ... per favore, non modificare mai i file delle dipendenze.
emix



4

In angular.json:

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

Sto usando angular-cli. Questo ha funzionato per me.


4

in angolare 2 ++.

Per cambiare porta è possibile eseguire il comando seguente nel terminale:

ng serve --host 0.0.0.0 --port 5000.

2

Sebbene ci siano già numerose soluzioni valide nelle risposte di cui sopra, ecco una guida visiva e una soluzione specifica per i progetti di Angular 7 (forse anche versioni precedenti, nessuna garanzia però) usando Visual Studio Code. Individua lo schema.json nelle directory come mostrato nell'albero delle immagini e modifica il numero intero sotto port -> default per una modifica permanente della porta nel browser.

inserisci qui la descrizione dell'immagine


@ s34N Lieto di sentirlo. Se la risposta è stata di aiuto, ricordati di dare un voto sul post se non lo hai già fatto. Grazie compagno.
themightyhulk

2

Vai al angular.jsonfile,

Cerca la parola chiave "serve":

Aggiungi la portparola chiave come mostrato di seguito:

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

1

Abbiamo due modi per modificare il numero di porta predefinito in Angolare.

Primo modo per comando cli:

ng serve --port 2400 --open

In secondo modo è quello di configurazione nella posizione: ProjectName\node_modules\@angular-devkit\build-angular\src\dev-server\schema.json.

Apporta modifiche al schema.jsonfile.

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

Non è consigliabile modificare i file in node_modules che potrebbero essere sovrascritti dopo aver reinstallato il pacchetto. Un'ottima soluzione è stata presentata da Sajeetharan.
Daniel Santana,

1

Corri

ng serve --port yourport

Esempio:

ng serve --port 4401


1

Il codice ha funzionato per me era il seguente

ng serve --port ABCD

Per esempio

ng serve --port 6300

0

Per eseguire e aprire nel browser utilizzare automaticamente la bandiera -openo solo-o

ng serve -o --port 4200

Nota: la porta 4200 è arbitraria. Può essere qualsiasi porta di tua scelta


0

Se si desidera utilizzare la variabile di ambiente NodeJS per impostare il valore della porta del server di sviluppo della CLI angolare, è possibile il seguente approccio:

  • crea lo script NodeJS, che avrà accesso alla variabile d'ambiente (diciamo, DEV_SERVER_PORT) e potrebbe essere eseguito ng servecon il --portvalore del parametro preso da quella variabile ( child_process potrebbe essere nostro amico qui):
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()));
  • aggiornare package.json per fornire questo script in esecuzione tramite npm
  • non dimenticare di impostare la DEV_SERVER_PORTvariabile di ambiente (può essere eseguita tramite dotenv )

Ecco anche la descrizione completa di questo approccio: Come modificare la porta del server di sviluppo della CLI angolare tramite .env .


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.