web-dev-qa-db-de.com

Führen Sie Angular2 als statische App in einem Browser ohne Server aus

Wenn ich das Konzept von Angular2 verstehe, werden TypeScript-Dateien in .js-Dateien umgewandelt. Grundsätzlich sollte es möglich sein, diese Angular2-Anwendung als statische Anwendung aus AWS S3-Bucket, GitHub oder einer anderen statischen Quelle zu kompilieren, zu verpacken und dann auszuführen.

Wenn ich die Angular2-Anwendung auf dem Knotenserver (mit dem Befehl "ng serv") auf dem Knotenserver ausführt, werden 500 MB RAM auf dem Server benötigt. - soll es wirklich so sein! Welchen Nutzen hat dieses Framework dann beispielsweise gegen React, das nur einen Browser benötigt.

Ich kann anscheinend nichts Nützliches für die Angular2-Anwendung als statisch kompiliertes HTML + JS finden.

Vielleicht kannst du mir helfen, das zu verstehen und zu lösen?

Danke vielmals!

Maris

22
Maris

Führen Sie den Befehl BUILD aus, um BUNDLEbuild aufzurufen

ng bauen

oder für einen Produktionsaufbau/-bündel

ng Build --Prod

Es wird Ihre App zu einer verteilbaren App zusammenstellen.

Wenn Sie damit fertig sind, suchen Sie in Ihrem Apps-Stammverzeichnis nach einem dist-Ordner, der alles enthält, was Ihre App außerhalb des Knotenservers ausführen muss, beispielsweise eine Tomcat-Instanz.

_/Update

Stellen Sie dank des Kommentars von @Maris sicher, dass Ihre Dateipfade relativ zum aktuellen Verzeichnis und nicht relativ zum Stammverzeichnis sind.

Führen Sie einfach diesen Befehl aus, um das Basis-Href-Element in Ihrer index.html zu ändern.

ng build --prod --base-href ./

36
Logan H

dies ist eine großartige Möglichkeit, Ihre Anwendung zu exportieren. Sie brauchen nur eine kleine Änderung 

<base href="/">

zu

<base href="./">
12

Es ist unmöglich, denke ich, während in modernen Browsern Fehler auftreten:

Nicht erfasst (Versprechen): SecurityError: Fehler beim Ausführen von 'replaceState' in 'History': ...

das ist schade

5
V. Kalyuzhnyu

Das funktioniert für mich:

$ ng build --prod --base-href ./
5
Larry Parker

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

Wenn es nicht für jeden offensichtlich ist und nicht für mich. Wenn Sie den dist-Ordner lokal ausführen möchten, nachdem Sie ihn erstellt und seine Basisreferenz korrigiert haben, verwenden Sie einen HTTP-Server und verweisen Sie auf den dist-Ordner, nicht auf eine bestimmte Datei. Aus dem cmd-Fenster in Ihrem Projektordner 

c:\user\meinProjekt> http-server ./dist

wie im Link erklärt

0
vtechmonkey