Wie stelle ich eine angular2-App auf einem lokalen Tomcat-Server bereit?

Question

Ich habe eine angular2-App mit dem Lite-Server entwickelt. Jetzt möchte ich diese App auf einem Tomcat-Server bereitstellen, um sich mit einem Java-Backend zu verbinden. Ich habe angular cli benutzt. Ich habe den Befehl 'ng build -prod' verwendet, um den Ordner dist zu generieren. Laut dem Tutorial von udemy zu angular2 reicht der Inhalt dieses Ordners aus, um ein angular2-Projekt zu implementieren. Ich lege den Inhalt dieses Ordners in den WebContent-Ordner des Java-Projekts und klicke auf die grüne Schaltfläche in der Eclipse-IDE, um mit dem Serving der Dateien zu beginnen. In anderen Projekten kann ich auf diese Weise HTML- und Javscript-Dateien erfolgreich bereitstellen. Aber für dieses angular2 Projekt erscheint "Loading ..." und die App startet nie. Die Konsole zeigt diese Fehler an.

GET http://localhost:8080/vendor/es6-shim/es6-shim.js [HTTP/1.1 404 Not 3ms gefunden] GET http://localhost:8080/vendor/reflect-metadata/Reflect.js [HTTP/1.1 404 Not Found 4 ms] GET http://localhost:8080/vendor/systemjs/dist/system.src.js [HTTP/1.1 404 Not 4 ms gefunden] GET http://localhost:8080/vendor/zone.js/dist/zone.js [HTTP/1.1 404 Not Found 4 ms] GET http://localhost:8080/vendor/reflect-metadata/Reflect.js [HTTP/1.1 404 Not Found 1 ms] GET http://localhost:8080/vendor/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 2 ms] GET http://localhost:8080/vendor/zone.js/dist/zone.js [HTTP/1.1 404 Not Found 2 ms] ReferenceError: System ist nicht definiert

Diese Fehler scheinen mir wierd, weil ich die Dateien genau an diesen Orten sehe.

Wenn ich ng serve im Projektordner angular2 cli ausführen, läuft die App gut.

Wie kann ich den Ordner dist in einem Tomcat-Server bereitstellen, ohne den Light Server auszuführen, oder muss der Light Server möglicherweise gleichzeitig ausgeführt werden? Was ist der beste Weg, dies zu tun?

Answer 1

Ich habe ein kleines Skript ausgeführt, um das Projekt zu erstellen und dann auf tomcat zu kopieren. Ich sage eckig, was das Basisverzeichnis ist, unter dem es in Tomcat läuft.

#!/bin/sh 
ng build --base-href /angular/ --prod 
mkdir -p /home/xxx/apache-tomcat-8.0.37/webapps/angular 
cp -R /home/xxx/angular-clitest/dist/* /home/xxx/apache-tomcat-8.0.37/webapps/angular/ 

Einmal laufen thats, starten Sie Tomcat und Sie können es zugreifen: http://localhost:8080/angular

Answer 2

generieren, um den dist-Ordner ng build --environment = prod und kopieren Sie die dist Ordnerinhalte in tomcat/opt/tomcat/mit Webapps/ROOT/Ordner.

Wenn wir die http://localhost:8080/ im Browser drücken, wird automatisch index.html Datei geladen.

Dank