wake-up-neo.com

Bereitstellen Angular 2 App mit Webpack für Tomcat - 404-Fehler

Ich möchte mein Angular 2-Frontend erstellen und auf einem Tomcat-Anwendungsserver bereitstellen. Für den Einstieg bin ich genau den Schritten der folgenden Einführung gefolgt: https://angular.io/docs/ts/latest/guide/webpack.html .

Ich habe also folgende Projektstruktur (alle Dateien sind genau wie in der Einleitung oben erwähnt):

angle2-webpack
--- config
------- helpers.js
------- karma.conf.js
------- karma-test-shim.js
------- webpack.common.js
------- webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
--- dist
--- Knotenmodule
---Öffentlichkeit
------- css
-------------- styles.css
------- Bilder
-------------- eckig.png
--- src
------- app
-------------- app.component.css
-------------- app.component.html
-------------- app.component.spec.ts
-------------- app.component.ts
-------------- app.module.ts
------- index.html
------- main.ts
------- polyfills.ts
------- hersteller.ts
--- typisierungen
--- karma.conf.js
--- package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js

npm start bzw. webpack-dev-server --inline --progress --port 3000 auf der Konsole oder in Webstorm → funktioniert wie erwartet

Wenn ich npm build bzw. rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail starte, wird die App ohne Fehler erstellt, und die Ausgabepaketdateien werden wie erwartet physisch im Ordner dist abgelegt.

dist
---Vermögenswerte
------- angle.png
--- app.css
--- app.css.map
--- app.js
--- app.js.map
--- index.html
--- polyfills.js
--- polyfills.js.map
--- vendor.js
--- vendor.js.map

Als Nächstes kopierte ich den Inhalt des dist-Ordners in das webapps-Verzeichnis eines Tomcat 9.0. Wenn ich versuche, auf die installierte App zuzugreifen, erhalte ich eine 404-Fehlermeldung für die .css- und .js-Dateien ( , die im angehängten Bild ) zu sehen sind ../URLs → "/ obv /" fehlen.

Ich bin wirklich festgefahren und habe das Gefühl, dass ich bereits alles versucht habe, was ich zu diesem Thema im Internet finden könnte. 

Könnte mir bitte jemand sagen, was ich falsch mache? Danke im Voraus.

10
Smoose28

Das Problem hängt mit dem Tag <base href="/" /> zusammen. Dies ist nur falsch, wenn Sie einen Webserver wie Tomcat verwenden oder versuchen, die App mit firefox index.html direkt vom Dateisystem zu laden. Dies muss in <base href="./" /> geändert werden. Wenn die App weiterhin Probleme hat, prüfen Sie, wie die Skriptdateien importiert werden. Ich habe versucht, angle2-webpack mit Tomcat zu verwenden, und musste auch alle Skript-Tags ändern, um keinen führenden Schrägstrich im src-Attribut zu verwenden.

<script src="js/vendor.js" ></script>

Bei Webpack wird das Verhalten durch das Attribut output.publicPath gesteuert. In der angle2 Dokumentation und im angle2-webpack ist diese Einstellung auf gesetzt 

output.publicPath="/"

Was zu absolutem Pfad in den Links führt. Wenn das Webpack entfernt wird, werden relative Pfade und die Links für Skripte und Bilder verwendet.

13
mszalbach

Wenn Sie HashLocationStrategy nicht verwenden, erhalten Sie durch die Aktualisierung 404 für die Tomcat-Bereitstellung. In diesem Fall müssen Sie web.xml für Ihre Lösung verwenden und Ihre Route angeben, um auf index.html zu verweisen. Hier sind die Code-Snippets, die Sie für Ihren Pfad anwenden können. Anschließend werden die Routen von Angular behandelt. 

<servlet>
    <servlet-name>index</servlet-name>
    <jsp-file>/index.html</jsp-file>
</servlet>
<servlet-mapping>
    <servlet-name>index</servlet-name>
    <url-pattern>/home</url-pattern>
</servlet-mapping>

Wie bereits von anderen vorgeschlagen, konfigurieren Sie Ihre index.html (by), um die App zu laden.

5
Amit khandelwal

Ich musste eine leichte Variation von @ alokstars Antwort verwenden. Ich musste auch das Flag "-d" oder "--deploy" hinzufügen. Dies könnte an einer Änderung der Version liegen. 

Ich verwende die angle-cli-Version: 1.0.0-beta.28.3

  1. Ich habe den Befehl "ng build -prod -bh/my_app -d/my_app" im Projektordner von angle2 ausgeführt.
  2. Kopieren Sie den Inhalt des Ordners "dist" im Projektordner "angle2" in den Ordner "my_app" im Ordner "Tomcat/webapp".
  3. Starten Sie den Tomcat-Server (falls nicht aktiv).

Hinweis: * Das ng Build-Dokument-Produktionsflag als "-prod" und nicht "--prod"

Wenn mein Tomcat auf Port 8080 läuft, kann ich auf die App zugreifen: http: // localhost: 8080/my_app

2
Ashutosh

Ich hatte eine ähnliche Situation. Die Front-End-App war mit Winkel-2 und Webpack fertig, und ich wollte sie auf einem Tomcat-Server bereitstellen. Ich habe folgende Schritte befolgt:

  1. Führen Sie den Befehl "ng build --prod --bh/[URL, die Sie für die Produktion erweitern möchten]" in Ihrem Angular 2-Projektordner aus.

  2. Es erstellt einen dist-Ordner in Ihrer angle2-App und Ihr Projektname aus Schritt 1 wird für die Tomcat-Server-URL verwendet.

  3. Kopieren Sie alle Dateien des neu erstellten dist-Ordners und fügen Sie sie im webapps-Ordner der Java-Anwendung ein.

  4. Kriegsdatei erstellen.

  5. Stellen Sie diesen Krieg auf dem Server bereit.

Ich hoffe es hilft!

0
alokstar

So habe ich meine Anwendung auf Tomcat bereitgestellt. Alles hängt davon ab, welche base href Sie in der index.html ..__ angeben. Alle Bilder sollten unter 'gehalten werden. Ordner "". Und der Pfad für jedes Bild im Projekt muss relativ sein, beginnend mit diesem Ordner.

src = "assets/img/img1.jpg"

Dadurch wird die Schwierigkeit von file not found, die bei der Bereitstellung der Anwendung auftreten wird, entfernt.

Jetzt werden diese Schritte den Rest erledigen.

  • ng build --prod --base-href/myApp - Dieser Befehl fügt der Index.html die base-href = '/ myApp' hinzu
  • Erstellen Sie den Ordner "myApp" im Ordner "webapps" von Tomcat.
  • Kopieren Sie den Inhalt des dist-Ordners in diesen myApp-Ordner.
  • Führen Sie den Server aus.

Die Anwendung kann unter http: // localhost: 8080/my_app aufgerufen werden.

Wenn Sie nicht möchten, dass der Kontext "myApp" für Ihre Anwendung verwendet wird, versuchen Sie es mit base href = '. /'. Oder machen Sie einfach den Produktions-Build mit dem Befehl ng build --prod.

Das hat in meinem Fall geholfen. Ich hoffe es hilft.

0
Abhishek Kumar
  • kopieren Sie den Ordner "dist" in den Ordner "webapps" in Tomcat und verknüpfen Sie localhost: 8080/dist wird funktionieren . (Sie müssen "publicPath: '/" "in" publicPath:'/dist/"" ändern und "npm" ausführen Build ausführen
  • Meine Basis: href = "/"
0