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

Ответ 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

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