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

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

Итак, у меня есть следующая структура проекта (все файлы точно такие же, как во вступлении выше):

angular2 -webpack
--- конфигурации
------- helpers.js
------- karma.conf.js
------- карма-тест-shim.js
------- webpack.common.js
------- webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
--- расстояние
--- node_modules
--- общественности
------- CSS
-------------- styles.css
------- изображения
-------------- angular.png
--- ЦСИ
------- Приложение
-------------- app.component.css
-------------- app.component.html
-------------- app.component.spec.ts
-------------- app.component.ts
-------------- app.module.ts
------- index.html
------- main.ts
------- polyfills.ts
------- vendor.ts
--- типизации
--- karma.conf.js
--- package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js

npm start соответственно webpack-dev-server --inline --progress --port 3000 на консоли или в Webstorm → работает как ожидалось

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

расстояние
--- активы
------- angular.png
--- app.css
---app.css.map
--- app.js
---app.js.map
--- index.html
--- polyfills.js
---polyfills.js.map
--- vendor.js
---vendor.js.map

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

output.publicPath="/"

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

Ответ 2

Если вы не используете HashLocationStrategy, поэтому обновление даст вам 404 для развертывания tomcat. В этом случае вы должны использовать web.xml для своего решения и указать весь маршрут, чтобы указать на index.html. Вот фрагменты кода, которые вы можете применить для своего пути, а затем маршруты 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>

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

Ответ 3

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

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

  • Я выполнил команду: "ng build -prod -bh/my_app -d/my_app" в папке проекта angular2.
  • Скопируйте содержимое папки "dist" в папку проекта angular2 в папку "my_app" в папке tomcat/webapp.
  • Запустите сервер tomcat (если он не запущен).

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

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

Ответ 4

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

Ответ 5

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

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

  • Он создаст папку dist в вашем приложении angular2, а имя вашего проекта - с шага 1 будет использоваться на URL-адресе сервера tomcat.

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

  • Создайте файл войны.

  • Разверните эту войну на сервере.

Надеюсь, что это поможет!

Ответ 6

Вот как я развернул свое приложение на Tomcat. Все зависит от базового href, который вы предоставляете в index.html. Все изображения должны храниться в папке "активы". И путь для любого изображения в проекте должен быть относительным, начиная с этой папки, т.е.

src= "assets/img/img1.jpg"

При этом будет устранена сложность файла не найден, которая возникнет при развертывании приложения.

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

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

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

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

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