web-dev-qa-db-ger.com

So servieren Sie einen Angular 2 dist-Ordner index.html

Ich verwende diese eckige 4 Seed-App: https://github.com/2sic/app-tutorial-angular4-hello-dnn

Es verwendet Webpack und funktioniert gut.

Es scheint nur die dev-Dateien und nicht den dist/Ordner zu bedienen.

Ich möchte den dist-Ordner bedienen.

Ich bin mir nicht sicher, ob der Befehl dazu ausgeführt wird oder ob ich einen Lite-Server installieren muss.

Ich führe diesen Befehl aus, um den dist-Ordner zu erstellen (was gut funktioniert):

g build --prod --aot --output-hashing=none

Jetzt möchte ich diesen Build im Browser ausführen.

angularwebpackwebpack-dev-server
14
AngularM

Sie können dazu den http-Server verwenden. Generieren Sie zunächst einen Build mit dem Befehl ng build --prod --aot --output-hashing=none. Dadurch wird ein dist-Ordner in Ihrer Verzeichnisstruktur erstellt.

Führen Sie danach http-server ./dist aus, der das Projekt aus dem dist-Ordner bereitstellt.

Stellen Sie sicher, dass Sie den http-Server global installiert haben 

npm install http-server -g

Referenz finden Sie unter https://www.npmjs.com/package/http-server

38
noor

Sie benötigen einen Server, um Ihren generierten Build bereitzustellen.

Ich benutze den http-Server. Installieren Sie den http-Server mit:

npm install -g http-server

gehen Sie jetzt in Ihren dist-Ordner und führen Sie diesen Befehl aus

http-server

wie hier gezeigt:

 enter image description here

Überprüfen Sie http: // localhost: 8080 in Ihrem Browser

12
Deepak Kumar

Zumindest für Angular-Apps scheint angular-http-server eine schönere Option zu sein.

Installieren Sie es zuerst mit

npm install angular-http-server -g # or yarn global add angular-http-server

Dann führe es aus:

angular-http-server --path path/to/dist/folder

Weitere Informationen zur Verwendung finden Sie im repo .

PS: Laut Autor sollte es auch mit anderen SPA-Frameworks (React, Vue usw.) funktionieren.

11
rsenna

ng serve funktioniert wie gewohnt und erfordert keinen vorherigen Build. Es erzeugt Dateien im Speicher und verfügt über einige zusätzliche Funktionen wie das automatische Neuladen.

1
Tatsuyuki Ishi

Ich habe es mit einem http-Server versucht, indem ich ihn global installiert habe

npm install -g http-server

dann in den dist/project-ordner gezogen und mit probiert

http-server -o

ausgabe in der Konsole

[Fri Sep 13 2019 15:19:57 GMT+0530 (India Standard Time)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132
Safari/537.36"

Dann funktionierte diese Lösung mit allen Schritten gleich, aber anstatt den http-Server zu verwenden, versuche angular-http-server

Es hat bei mir funktioniert.

0
UniCoder

Ein paar Tipps 

so vermeiden Sie eine globale Installation

installieren Sie in Ihrer Wurzel

npm i http-server

in Ihrem package.json

"scripts": {
    "pwa": "http-server ./dist"
  }

als

npm run pwa
0
Whisher

Ich verteile den dist Ordner mit der Angular CLI ...

ng dienen --prod = true

Bei true wird die Build-Konfiguration auf das Produktionsziel festgelegt. Alle Builds verwenden Bündelung und begrenztes Baumwackeln. Ein Produktions-Build führt auch eine begrenzte Eliminierung von totem Code aus.

https://angular.io/cli/serve

0
Bill