Развертывание приложения Angular 2 с помощью Webpack для ошибок Tomcat - 404

Я хочу построить и развернуть свой Angular 2 front end на сервере приложений Tomcat. Для начала работы я следовал точно шагам следующего введения:https://angular.io/docs/ts/latest/guide/webpack.html.

поэтому у меня есть следующая структура проекта (все файлы, точно как в присказке, предусмотренных старт соответственно webpack-dev-server --inline --progress --port 3000 на консоли или в Webstorm →работает правильно

когда я запускаю npm build соответственно rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail он строит приложение без ошибок, и файлы выходного пакета физически помещаются в папку dist как ожидаемый.

р-н
---активы
-------угловатый.формат PNG
---приложение.в CSS
---приложение.стиль CSS.карта
---приложение.js
---приложение.js.карта
---индекс.HTML-код
--- полифиллы.js
--- полифиллы.js.карта
---продавец.js
---продавец.js.карта

затем я скопировал содержимое папки dist в каталог webapps Tomcat 9.0. Когда я пытаюсь получить доступ к установленному приложению, я получаю ошибку 404 для.css-и .js-файлы (, который может можно увидеть в прилагаемом изображении). Он пытается получить файлы из неправильных URL-адресов →"/ obv / " отсутствует.

Я действительно застрял здесь, и у меня такое чувство, что я уже пробовал все, что мог найти в Интернете по этой теме.

может кто-то пожалуйста, скажите мне, что я делаю неправильно? Заранее спасибо.

10
angular http-status-code-404 tomcat webpack

6 ответов

проблема связана с тегом <base href="/" />. Это просто неправильно при использовании веб-сервера, как tomcat или пытается загрузить приложение непосредственно из файловой системы с firefox index.html. Это должно быть изменено на <base href="./" />. Если у приложения все еще есть проблемы, проверьте, как импортируются файлы скриптов. Я пытался использовать angular2-webpack С tomcat, а также необходимо изменить все теги скриптов, чтобы не использовать ведущую косую черту в атрибуте src.

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

С webpack поведение управляется атрибутом output.publicPath. В документация angular2 и angular2-webpack это 

output.publicPath="/"

что приводит к абсолютному пути в ссылках. При удалении webpack будет использовать относительные пути и ссылки для скриптов и изображений.

12

Если вы не используете HashLocationStrategy, поэтому обновление даст вам 404 для развертывания tomcat. В таком случае вы должны использовать веб.xml для вашего решения и предоставить весь маршрут, чтобы указать индекс.формат html. Вот фрагменты кода, которые вы можете применить для своего пути, а затем угловые маршруты будут обрабатывать это. 

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

как предлагалось ранее другим, настройте свой индекс.html (by) для загрузки приложения.

4

Мне пришлось использовать небольшую вариацию ответа @alokstar. Мне пришлось добавить флаг"- d "или" --deploy". Это может быть связано с изменением версии.

Я запускаю версию angular-cli: 1.0.0-beta.28.3

  1. я запустил команду: "ng build-prod-bh /my_app-d /my_app" в папке проекта angular2.
  2. скопируйте содержимое папки " dist "в папку проекта angular2 в папку" my_app " в папке tomcat/webapp.
  3. запустить сервер tomcat (если не работает).

Примечание.: * Флаг производства документов сборки ng как "- prod", а не"--prod"

с моим tomcat работает на порту 8080, я мог бы получить доступ к приложению, используя:http://localhost:8080/my_app

2
  • скопируйте папку "dist" в папку "webapps" в tomcat и свяжите localhost:8080/dist будет работать. (вы должны изменить "publicPath:' / '" на "publicPath:' / dist/' "и запустить" npm run build)
  • моя база: href="/"
0

У меня была похожая ситуация. Приложение front-end было готово с использованием angular-2 и webpack, и я хотел развернуть его на сервере tomcat. Я сделал следующие шаги:--1-->

  1. выполнить команду "ng build --prod --bh / [URL, который вы хотите расширить для производства]" в папке проекта Angular 2.

  2. он создаст папку dist в вашем приложении angular2 и "Ваше имя проекта" с шага 1 будет использоваться на сервере tomcat URL-АДРЕС.

  3. скопируйте все файлы вновь созданной папки dist и вставьте их в папку webapps приложения Java.

  4. создать war-файл.

  5. перенести войну на сервере.

надеюсь, что это помогает!

0

вот как я развернул свое приложение на tomcat. Все зависит от база href вы предоставляете в .HTML-код. Все изображения должны быть сохранены под 'assets'. И путь для любого изображения в проекте должен быть относительным, начиная с этой папки ie.

src= " активы / img / img1.в JPG"

Как это сделать, устранит трудность не нашел, который возникают при развертывании приложения.

теперь эти шаги сделают все остальное.

  • ng build --prod --base-href /myApp - данная команда добавит base-href=' / myApp' проиндексировать.HTML-код
  • создать папку myApp в папке webapps tomcat.
  • скопируйте содержимое папки dist в эту папку myApp.
  • запустить сервер.

приложение будет доступно по адресу http://localhost:8080/my_app

Если вы не хотите контекст "myApp" для вашего приложения, попробуйте сделать база href='./' или просто сделайте производственную сборку с помощью команды ng build --prod

Это помогло в моем случае. Надеюсь, это поможет.

0