Wdrażaj aplikację Angular 2 z pakietem Webpack do Tomcat - błędy 404

Question

Chcę zbudować i wdrożyć mój front Angular 2 na serwerze aplikacji Tomcat. Na początek podążałem dokładnie krokami następującego wprowadzenia: https://angular.io/docs/ts/latest/guide/webpack.html.

Więc mam następujące struktury projektu (wszystkie pliki są dokładnie tak, jak we wstępie mentionend powyżej):

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
--- publicznego
------- css
-------- ------ styles.css
------- zdjęć
-------------- angular.png
--- src
---- --- aplikacja
-------------- app.component.css
-------------- app.component.html
- ------------ app.component.spec.ts
-------------- app.component.ts
-------------- app.module.ts
------ -index.html
------- main.ts
------- polyfills.ts
------- vendor.ts
--- typowania
- -karma.conf.js
--- package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js

npm zaczynają odpowiednio webpack-dev-server --inline --progress --port 3000 na konsoli lub w Webstorm → działa zgodnie z oczekiwaniami

Kiedy biegnę npm build odpowiednio rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail buduje aplikację bez błędów i wyjście wiązki plików dostać fizycznie umieszczone w folderze dist zgodnie z oczekiwaniami.

dist
--- aktywa
------- angular.png
--- app.css
---app.css.map
--- app.js
---app.js.map
--- index.html
--- polyfills.js
---polyfills.js.map
--- vendor.js
--- dostawcą. js.map

Następnie skopiowałem zawartość folderu dist do katalogu webapps Tomcat 9.0. Kiedy próbuję uzyskać dostęp do zainstalowanej aplikacji, otrzymuję błąd 404 dla plików .css i .js (which can be seen in the attached picture). Próbuje uzyskać pliki z błędnych adresów URL: → "/ obv /" brakuje.

Naprawdę utknąłem tutaj i mam wrażenie, że wypróbowałem już wszystko, co mogłem znaleźć w Internecie na ten temat.

Czy ktoś mógłby mi powiedzieć, co robię źle? Z góry dziękuję.

Answer 1

Problem związany jest ze znacznikiem <base href="/" />. Jest to po prostu złe, gdy używasz serwera WWW, takiego jak tomcat, lub próbujesz załadować aplikację bezpośrednio z systemu plików za pomocą firefox index.html. To musi zostać zmienione na <base href="./" />. Gdy aplikacja nadal ma problemy, sprawdź, jak importowane są pliki skryptów. Próbowałem użyć angular2-webpack z tomcat, a także trzeba zmienić wszystkie znaczniki skryptu, aby nie używać wiodącego slasha w tym atrybucie src.

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

Z pakietem internetowym zachowanie jest kontrolowane przez atrybut output.publicPath. W angular2 documentation aw angular2-webpack ten jest ustawiony na

output.publicPath="/" 

co prowadzi do absolutnej ścieżki w linki. Po usunięciu pakietu internetowego będą używane ścieżki względne, a łącza do skryptów i obrazów będą działać.

Answer 2

• skopiuj folder "dist" do folderu "webapps" w tomcat i link localhost: 8080/dist zadziała. (trzeba zmienić "publicPath: '/'" na "publicPath: '/ dist /'" i uruchom "run npm build)
• Moja baza: href =" /”

Answer 3

miałem podobny .. sytuacja Aplikacja front-end był gotowy za pomocą kątowego-2 i WebPACK i chciałem wdrożyć go na serwer tomcat i przestrzegać następujących czynności:

1. polecenie Run „ng budować --prod --bh/[Adres URL, który chcesz rozszerzyć do produkcji] "w folderze projektu Angular 2.

2. Spowoduje to utworzenie folderu dist w twojej aplikacji angular2 & "nazwa twojego projektu" z kroku 1 będzie używana na adresie URL serwera tomcat.

3. Skopiuj wszystkie pliki nowo utworzonego folderu dist & wklej je w folderze webapps aplikacji Java.

4. Utwórz plik wojenny.

5. Rozmieść tę wojnę na serwerze.

Mam nadzieję, że pomoże!

Answer 4

Musiałem użyć niewielkiej odmiany odpowiedzi @ alokstar. Musiałem również dodać flagę "-d" lub "--deploy". Może to być spowodowane zmianą wersji.

Używam wersji kątowej-cli: 1.0.0-beta.28.3

1. Uruchomiłem polecenie: "ng build -prod -bh/my_app -d/my_app" w folderze projektu angle2.
2. Skopiuj zawartość folderu "dist" w folderze projektu angular2 do folderu "my_app" w folderze tomcat/webapp.
3. Uruchom serwer tomcat (jeśli nie działa).

Uwaga: * NG dokumenty produkcja flag kompilacji jak "-prod" a nie "--prod"

z moim Tomcat działa na porcie 8080, mogę uzyskać dostęp do aplikacji przy użyciu: http://localhost:8080/my_app

Answer 5

Jeśli nie używasz HashLocationStrategy, odświeżenie da ci 404 do wdrożenia tomcat. W takim przypadku musisz użyć pliku web.xml dla swojego rozwiązania i podać całą trasę do pliku index.html. Oto fragmenty kodu, które można zastosować do ścieżki, a następnie obsługiwane są przez trasy Angular.

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

Zgodnie z sugestią wcześniej inną konfigurację pliku index.html (przez) w celu załadowania aplikacji.