Bereitstellen von Winkel-2-App mit Webpack Tomcat - 404-Fehler

Ich soll das erstellen und bereitstellen von meinem Winkel-2 front-end auf einem Tomcat application server. Für den Einstieg habe ich folgte genau die Schritte der folgenden Einführung: https://angular.io/docs/ts/latest/guide/webpack.html.

Also ich habe folgende Projekt-Struktur (alle Dateien sind genau so, wie in der Einleitung aufgeführten oben):

angular2-webpack
---config
-------helpers.js
-------karma.conf.js
-------karma-test-shim.js
-------webpack.common.js
-------webpack.dev.js
-------webpack.prod.js
-------webpack.test.js
---dist
---node_modules
---öffentliche
-------css
--------------styles.css
-------Bilder
--------------eckig.png
---src
-------app
--------------app.Komponente.css
--------------app.component.html
--------------app.Komponente.spec.ts
--------------app.Komponente.ts
--------------app.- Modul.ts
-------index.html
-------main.ts
-------polyfills.ts
-------Verkäufer.ts
- - - - Testungen
---karma.conf.js
---Paket.json
---tsconfig.json
- - - - Testungen.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 bauen bzw. rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail es baut die app ohne Fehler und die Ausgabe-bundle-Dateien physikalisch abgelegt im "dist" Ordner als erwartet.

dist
---Vermögen
-------eckig.png
---app.css
---app.css.anzeigen
---app.js
---app.js.anzeigen
---index.html
---polyfills.js
---polyfills.js.anzeigen
---vendor.js
---Anbieter.js.Karte

Nächstes kopierte ich den Inhalt des dist-Ordners webapps-Verzeichnis des Tomcat-9.0. Wenn ich versuche, Zugriff auf die installierten app bekomme ich einen 404 Fehler für die .css - und .js-Dateien (die kann man in dem angehängten Bild).
Es versucht, die Dateien aus dem falschen URLs →"/öbv/" fehlt.

Ich bin wirklich stecken hier und ich habe das Gefühl, dass ich versucht habe schon alles was ich finden konnte im Internet bezüglich diesem Thema.

Könnte mir bitte jemand sagen was ich falsch mache? Vielen Dank im Voraus.

InformationsquelleAutor Smoose28 | 2016-08-18

  1. 12

    Das problem ist, die mit dem tag <base href="/" />. Dies ist nur falsch, wenn mit einem webserver wie tomcat oder versuchen zu laden die app direkt aus dem Dateisystem mit firefox index.html. Dies muss geändert werden, um <base href="./" />. Wenn die app hat immer noch Probleme überprüfen, wie die Skript-Dateien importiert werden. Ich habe versucht, angular2-webpack mit tomcat und auch erforderlich, ändern Sie alle script-tags, nicht mit einem führenden slash drin src-Attribut.

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

    Mit webpack, das Verhalten wird gesteuert durch das Attribut output.publicPath. In der angular2 Dokumentation und in der angular2-webpack ist 

    output.publicPath="/"

    Führt zu absoluten Pfad in den links. Wenn Sie entfernt webpack wird relative Pfade verwenden und die links für Skripte und Bilder.

    Vielen Dank für hilft mir so schnell (ich war blind). Ich habe dieses <img src="../../public/images/Winkel.png"> - tag in der app.component.html. Webpack verpasst dem src-Attribut auf die folgenden: <img src="/assets/Winkel.41eaea26322786b81b064790d8b49fbd.png" _ngcontent-exp-1="">. Wegen der führenden Schrägstrich kann es nicht finden. Gibt es eine Konfiguration oder etwas, das Webpack nicht fügen Sie diese slash oder wie handhaben Sie dieses Problem?
    Der führende Schrägstrich Hinzugefügt wird, weil der "Ausgang.publicPath = '/'" in der webpack.config.js (oder einem anderen webpack config-Datei). Wenn diese entfernt wird, der Standardwert ist einen relativen Pfad statt einem absoluten Pfad.
    Held des Tages! Es funktioniert!. Ich danke Ihnen so sehr. Ich war bereits rund um das Spiel mit den "Ausgang.publicPath" und die "<base href="/" />" und ich könnte schwören, dass ich versucht habe diese vor ohne Erfolg.

    InformationsquelleAutor mszalbach

  2. 5

    Wenn Sie nicht mit HashLocationStrategy so aktualisieren, geben Sie 404 für tomcat-deployment. In einem solchen Fall müssen Sie auf web.xml für Ihre Lösung und stellen Sie alle Ihre route auf index.html. Hier ist der code-snippets, die Sie anwenden können, für Ihren Weg und dann Eckige Routen umgehen können. 

    <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>

    Als früher vorgeschlagen, die von anderen konfigurieren index.html () zum laden der app.

    Dank schreiben, servlet-mapping auf allen Strecken gearbeitet hat
    Wie oft kann ich voten? Es ist schon fast 3 Tage nach einer Lösung zu suchen. Das ist eine Arbeit für meine vuejs2 webpack 4 maven deployment! Danke!

    InformationsquelleAutor Amit khandelwal

  3. 2

    Musste ich eine leichte variation von @alokstar Antwort. Ich hatte Sie zum hinzufügen eines "-d" oder "--deploy" - flag. Dies könnte wegen der änderung in der version.

    Ich bin mit Winkel-cli version: 1.0.0-beta.28.3

    1. Ich lief den Befehl: "ng build-prod -bh /my_app -d /my_app" in der angular2-Projekt-Ordner.
    2. Kopieren Sie den Inhalt der "dist" - Ordner in angular2 Projekt-Ordner "my_app" - Ordner in tomcat/webapp-Ordner.
    3. Starten tomcat-server (wenn nicht ausgeführt).

    Hinweis:
    * Die ng-Dokumente erstellen Produktions-flag "-prod" und nicht "--prod"

    Mit meiner tomcat läuft auf port 8080, ich könnte die app zugreifen, mit: http://localhost:8080/my_app

    Tat genau das, was du erwähnt hast und es funktioniert, mit Winkel-1.0.0. Danke!!!

    InformationsquelleAutor Ashutosh

  4. 0
    • kopieren "dist" Ordner "webapps" - Ordner in tomcat und link localhost:8080/dist arbeiten.
      ( Sie muss sich ändern "publicPath:' /'" "publicPath: '/dist/'" und "npm-run-build )
    • Mein base: href="/"

    InformationsquelleAutor Phong Quách Văn

  5. 0

    Ich hatte eine ähnliche situation. Die front-end-app bereit war, mit eckig-2 und webpack und ich wollte installieren Sie es auf tomcat-server. Ich folgte den folgenden Schritten:

    1. Befehl ausführen "ng bauen-prod --bh /[URL, die Sie erweitern möchten, die für die Produktion]" auf Ihre Eckige 2-Projekt-Ordner.

    2. Wird es schaffen "dist" - Ordner in Ihrem angular2 app & 'Projekt-name' aus Schritt 1 verwendet werden, die auf dem tomcat-server-URL.

    3. Kopieren Sie alle Dateien des neu erstellten dist Ordner & fügen Sie Sie in den webapps-Ordner der Java-Anwendung.

    4. Erstellen einer war-Datei.

    5. Bereitstellen, dass der Krieg auf dem server.

    Hoffe, es hilft!

    InformationsquelleAutor alokstar

  6. 0

    Dies ist, wie ich eingesetzt, meine Anwendung, die auf tomcat.
    Es hängt alles von der base href Sie in der index.html.
    Alle Bilder, die gehalten werden sollte, unter "Vermögen" Ordner. Und den Pfad für jedes Bild im Projekt müssen relativ sein ab diesem Ordner, dh.

    src="assets/img/img1.jpg"

    Als dies zu tun, entfernen Sie die Schwierigkeit, Datei nicht gefunden, die sich in der Bereitstellung der Anwendung.

    Nun, diese Schritte werden den rest erledigen.

    • ng build --prod - base-href   /myApp - dieser Befehl fügt die
      base-href='/myApp' zu index.html
    • Erstellen Ordner myApp in den webapps-Ordner von tomcat.
    • Kopieren Sie den Inhalt des dist-Ordner dieser Ordner Anwendung.
    • Auf dem server ausgeführt werden.

    Anwendung zugänglich sein wird, an http://localhost:8080/my_app

    Wenn Sie nicht möchten, dass der Kontext 'myApp' für Ihre Anwendung, dann versuchen Sie base href='./' Oder machen nur die Produktion erstellen Sie mit dem Befehl ng build --prod

    Das half in meinem Fall. Hoffe, es hilft.

    InformationsquelleAutor Abhishek Kumar

Schreibe einen Kommentar