Imposta host e porta predefiniti per ng serve nel file di configurazione


166

Voglio sapere se posso impostare un host e una porta in un file di configurazione, quindi non devo digitare

ng serve --host foo.bar --port 80

invece di solo

ng serve

Risposte:


233

CLI angolare 6+

Nella versione più recente di angolare, questo si trova nel angular.jsonfile di configurazione . Esempio:

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

Puoi anche usareng config per visualizzare / modificare i valori:

ng config projects["my-project"].architect["serve"].options {port:4444}

CLI angolare <6

Nelle versioni precedenti, questo era impostatoangular-cli.json sotto l' defaultselemento:

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "10.1.2.3"
    }
  }
}

7
Per semplificare le cose, è possibile specificare 0.0.0.0invece dell'ip host da ascoltare su tutti i dispositivi Ethernet. In questo modo è possibile utilizzare sia l'host locale sia l'indirizzo IP pubblico.
Dman

VS2017 sembra ignorare l'impostazione della porta per qualche strano motivo, ma ho usato questo trucco con l'aggiunta di @dman (0.0.0.0 come host) per abilitare almeno le connessioni remote.
Ola Berntsson,

4
Sembra che le cose siano cambiate nelle ultime versioni della CLI (sto usando la versione 6). Vedi qui per maggiori dettagli .
Nathan Friend

C'è un modo per rendere specifico questo ambiente di configurazione?
Pankaj,

71

A partire da ora questa funzione non è supportata, tuttavia se questa è una cosa che ti disturba un'alternativa sarebbe nel tuo pacchetto.json ...

"scripts": {
  "start": "ng serve --host foo.bar --port 80"
}

In questo modo puoi semplicemente correre npm start

Un'altra opzione se si desidera eseguire questa operazione su più progetti è quella di creare un alias, che è possibile nominare potenzialmente ngserveche eseguirà il comando sopra.


scusa, foo.bar, fai riferimento per cosa? AGGIORNAMENTO: l'ho rimosso e funziona, ma non lo so.
Muhammed Moussa,


29

Ciò è cambiato nell'ultima CLI angolare.

Il nome del file è cambiato in angular.jsone anche la struttura è cambiata.

Questo è ciò che dovresti fare:

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "foo.bar",
                  "port": 80
                }
            }
        }
        ...
    }
}

1
Ha funzionato per me con @
angular

1
Ha funzionato per me con @ angular / cli versione 7.0.6
Kerry Jones il

16

Un'altra opzione è eseguire il ng servecomando con l' --portopzione es

ng serve --port 5050 (ovvero per la porta 5050)

In alternativa, il comando ng serve --port 0:, assegnerà automaticamente una porta disponibile per l'uso.


Il --port 0 bit era una buona informazione ma non sono sicuro che risponda alla domanda.
Ash,

Mi è piaciuta l'opzione --port 0 che ha assegnato automaticamente la porta disponibile per l'uso ...
vinsinraw

La domanda si pone specificamente come impostarlo in un file di configurazione
Ojonugwa Jude Ochalifu,

11

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

Il primo modo è tramite il comando CLI:

ng serve --port 2400 --open

Il secondo modo è dalla configurazione nella posizione:

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

Apporta modifiche al file 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
    },

4
Non si desidera sovrascrivere o modificare i file di origine. angular.json è il modo corretto di sostituire le impostazioni predefinite dello schema, come indicato nella risposta accettata.
Bjørn Lindner,


5

Se si prevede di eseguire il progetto angolare in host / IP personalizzati e Porta, non è necessario apportare modifiche al file di configurazione

Il seguente comando ha funzionato per me

ng serve --host aaa.bbb.ccc.ddd --port xxxx

Dove,

aaa.bbb.ccc.ddd --> IP you want to run the project
xxx --> Port you want to run the project

Esempio

ng serve --host 192.168.322.144 --port 6300

Il risultato per me è stato

inserisci qui la descrizione dell'immagine


3

Se sei su Windows puoi farlo in questo modo:

  1. Nella directory principale del progetto, creare il file run.bat
  2. Aggiungi il tuo comando con la tua scelta di configurazioni in questo file. Per esempio

ng serve --host 192.168.1.2 --open

  1. Ora puoi fare clic e aprire questo file ogni volta che vuoi servire.

Questo non è un modo standard ma comodo da usare (cosa che sento).


0

ecco cosa ho inserito in package.json (eseguendo 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"
  },

Quindi un semplice npm start inserirà il contenuto di start. Potrebbe anche aggiungere altre opzioni ai contenuti



0

Se si desidera che il proprio indirizzo IP locale sia aperto durante l'esecuzione di ng service, è possibile effettuare le seguenti operazioni:

npm install internal-ip-cli --save
ng serve --open --host $(./node_modules/.bin/internal-ip --ipv4)
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.