Angular cli: Fertig für die Produktion

Question

Ich schrieb meine erste Angular 2-Anwendung, und ich möchte es auf einen Testserver legen.

I umgewandelt es vor kurzem zu einem Angular-cli Projekt und baute es mit dem Befehl:

ng build --prod 

Von dem, was ich verstehe, soll ich dann in der Lage sein, den Inhalt des „/ dist“ einzufügen Ordner auf der Test-Server und führen sie es mit

ng serve 

Wenn jedoch die „/ dist“ -Ordner Standalone laufen kann, warum bin ich nicht in der Lage es auf meinem PC als Standalone-Anwendung zu laufen (dh ich kann den Inhalt nicht kopieren von der dist Ordner an einen anderen Ort auf dem PC und führen Sie es.)

Dies wird tatsächlich die erste Anwendung sein, die ich auf einen Test/Produktionsserver setzen werde, also bitte ertragen Sie mit mir, wenn das, was ich frage, albern ist.

Answer 1

Sie sollten nicht, und ich glaube nicht, verwenden ng serve Ihren Build zu veröffentlichen. Die mit ng build erstellten Dateien können auf einen Webserver hochgeladen und von dort aus bedient werden.

1. Run ng build -e=prod --prod --no-sourcemap --aot

Obwohl die neueste Version von angular-cli standardmäßig ohne sourcemaps, lohnt es sich hier erwähnens. Die -e=prod stellt sicher, dass es die Produktionsumgebung verwendet, die im Ordner environments definiert ist. Letzte Sache ist die --aot. Wenn Sie in Ihrem Projekt keine besonderen Dinge vor sich haben, besteht eine große Chance, dass Sie es mit dem Compiler vor dem Compilieren vorkompilieren lassen können. Sie können jedoch Probleme bekommen und Sie können diese mit ng serve --aot beheben, oder entfernen Sie die --aot insgesamt.

2. Sie können dann den Inhalt des Ordners dist auf Ihren Webserver kopieren. Beachten Sie jedoch, dass Sie sicherstellen sollten, dass alle nicht vorhandenen Dateianforderungen auf dem Server an index.html umgeleitet werden und die URL, die auf Ihre Anwendung verweist, im Stammverzeichnis ist.

Das bedeutet für index.html Umleitung auf zum Beispiel nginx, können Sie dies in Ihrer Serverkonfiguration Block setzen können:

location/{ 
    try_files $uri $uri/ /index.html; 
} 

Dies ist, wenn www.example.com dient in den dist-Ordnern erstellt die index.html. Wenn Sie Ihre Anwendung aus irgendeinem Grund aus einem Unterordner wie www.example.com/subfolder bereitstellen möchten, sollten Sie das <base>-Tag im generierten index.html so ändern, dass es auf diesen Unterordner zeigt.

Wenn Sie Ihre Produktion lokal testen möchten, ist eine der Optionen lite-server zu installieren.

npm install -g lite-server 

dann in der Konsole zu path/to/project/root/dist, navigieren und lite-server laufen. Dadurch wird ein Web-Server erstellen und Ihrem Browser öffnen, und dienen dazu, die erzeugte index.html

Wenn Sie nginx verwenden und wollen cool sein und die erzeugten .gz Dateien statisch dienen, können Sie dies Platz in Ihrem nginx gzip-Konfiguration:

gzip on; 
gzip_static on; 

Answer 2

Sie haben zwei Möglichkeiten: Sie können Ihre App kopieren und ng serve --prod ausführen (was ein wenig übertrieben ist, denke ich), oder Sie können Ihre ./dist auf einen anderen Server kopieren und einige Server-Software verwenden (zB nginx, apache, express - es gibt Tonnen davon, Sie können wählen, die Sie vertraut sind). Alles, was Sie brauchen, ist, alle Anfragen, die keine Datei anfordert, an eine index.html zu übergeben, da die eckige App SPA ist. Hier ist ein Beispiel von .htaccess für einen Apache-Server:

RewriteEngine On 
# If an existing asset or directory is requested go to it as it is 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule^- [L] 

# If the requested resource doesn't exist, use index.html 
RewriteRule^/index.html 

Answer 3

nb build --prod legen Sie alle erforderlichen Dateien in dist Ordner.

Sie benötigen kein ng serve, um ein gebautes Projekt auszuführen.

Sie müssen dist Inhalte in einem beliebigen Server (auch eine Art von localhost)

ng serve ist nur mit Live-reload für Entwicklung stellen.