Come consentire l'accesso al di fuori di localhost

Come posso consentire l'accesso al di fuori del localhost su Angular2? Posso navigare localhost:3030/panelfacilmente ma non riesco a navigare quando scrivo il mio IP come 10.123.14.12:3030/panel/.

Potresti per favore permettermi come risolverlo? Non sto usando npm(gestione progetto nodo - installazione nodo / inizio nodo) per installare ed eseguire il progetto.

Se vuoi, posso fornire il mio package.jsone index.html.

Usando ng serve --host 0.0.0.0ti permetterà di connetterti ng serveusando il tuo IP invece di localhost.

MODIFICARE

Nelle versioni più recenti del cli, devi invece fornire il tuo indirizzo IP locale

MODIFICA 2

Nelle versioni più recenti di cli (penso v5 e successive) è possibile utilizzare di 0.0.0.0nuovo l'ip per ospitarlo e parlare con chiunque sulla propria rete.

Utenti Mac:

1. Vai a Preferenze di Sistema -> Rete -> Wi-Fi
2. Copia l'indirizzo IP sotto lo stato (di solito 192.168.1.x)
3. Incollalo nel tuo servizio come: ng serve --host 192.168.1.x

Quindi devi essere in grado di vedere la tua pagina su altri dispositivi attraverso 192.168.1.x:4200.

esegui comando

ng serve --host=0.0.0.0 --disable-host-check

questo disabiliterà il controllo dell'host e consentirà l'accesso dall'esterno (anziché localhost) con indirizzo IP

È possibile utilizzare il comando seguente per accedere con il proprio IP.

ng serve --host 0.0.0.0 --disable-host-check

Se si utilizza npm e si desidera evitare di eseguire il comando ogni volta, è possibile aggiungere la seguente riga al file package.json nella sezione script .

"scripts": {
    ...
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
    ...
}

Quindi puoi eseguire la tua app usando il comando seguente per accedere dall'altro sistema nella stessa rete.

npm start

Ho appena modificato il angular.jsonfile nel mio progetto come di seguito e funziona

...

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "project:build",
        "host": "0.0.0.0"
      },

...

puoi anche introspettare tutto il traffico HTTP in esecuzione sui tunnel utilizzando ngrok , quindi puoi esporre utilizzandongrok http --host-header=rewrite 4200

Apri cmd e vai alla posizione del progetto, ad esempio dove esegui npm install o ng serve per il progetto.

e quindi esegui il comando - ng serve --host 10.202.32.45dov'è il 10.202.32.45tuo indirizzo IP.

Sarai in grado di accedere alla tua pagina in 10.202.32.45:4200cui 4200 è il numero di porta.

Nota: se offri l'app utilizzando questo comando, non potrai accedervilocalhost:4200

Per il problema era Firewall. Se sei su Windows, assicurati che il nodo sia autorizzato attraverso

Una soluzione rapida che potrebbe aiutare qualcuno:

Aggiungi questa riga come valore per iniziare ng serve --host 0.0.0.0 --disable-host-check nel tuopackage.json

ex:

{
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",
}

E poi semplicemente fare startonpm run start

sarai in grado di accedere al tuo progetto da altri IP locali.

Se stai affrontando lo stesso problema all'interno di Docker, puoi utilizzare di seguito CMDin Dockerfile.

CMD ["ng", "serve", "--host", "0.0.0.0"]

O completa Dockerfile

FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

Crea proxy.conf.jsone incolla questa configurazione

{  
"/api/*":
    {    
        "target": "http://localhost:7070/your api project name/",
        "secure": false,
        "pathRewrite": {"^/api" : ""}
    }
}

Sostituire:

let url = 'api/'+ your path;

Esegui da CLI:

ng serve  --host port.number —-proxy-config proxy.conf.json

per me funziona usando "ng serve --open --host 0.0.0.0" ma c'è un avvertimento

ATTENZIONE: questo è un server semplice da utilizzare nel test o nel debug di applicazioni angolari a livello locale. Non è stato esaminato per problemi di sicurezza.

Il collegamento di questo server a una connessione aperta può compromettere l'applicazione o il computer. L'uso di un host diverso da quello passato al flag "--host" potrebbe causare problemi di connessione al websocket. In tal caso potrebbe essere necessario utilizzare "--disableHostCheck".

No package.json è necessario cambiare.

Per me funziona usando:

ora serve --host = 0.0.0.0 --port = 5999 --disable-host-check

Host: http: // localhost: 5999 /

• Usa ng serve --host<Your IP> --port<Required if any>.

• ng serve --host = 192.111.1.11 --port = 4545.

• Ora puoi vedere la riga sotto alla fine della compilation.

Angular Live Development Server è in ascolto il 192.111.1.11:4545, apri il browser su http://192.111.1.11:4545/**.

Per le persone che stanno usando il project manager del nodo, anche questa riga aggiunta a package.json sarà sufficiente. Per gli utenti della CLI angolare, la risposta di mast3rd3mon è vera.

Puoi aggiungere

"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"

su package.json