Приложение Angular 6 ломается при перезагрузке после производственной сборки
У меня есть приложение, в котором я сохранил ту папку dist, которую мы получаем после успешной полной производственной сборки на моем сервере. Все работает нормально, все модули и компоненты работают отлично. Пока я не перезагружаю окно браузера вручную, возникают следующие ошибки. Также я создал проект, используя base-href - / dist /
Object not found!
The requested URL was not found on this server. If you entered the URL
manually please check your spelling and try again.
If you think this is a server error, please contact the webmaster.
Ответы 4
Вы пробовали создать сайт без --base-href или с --base-href = ""?
Вы должны настроить свой сервер для отправки index.html (обычно) для любого URL-адреса, который не существует.
Что происходит, когда вы переходите на другой маршрут в приложении, именно JS обрабатывает вашу маршрутизацию. Но как только вы нажмете «Обновить», это браузер, который просит ваш сервер обработать этот запрос, и, поскольку маршруты не обрабатываются на стороне сервера, он сообщает об указанной ошибке.
Следовательно, вам необходимо доставить файл index независимо от того, какой маршрут запрашивает браузер.
Что ж, если мы говорим о попадании в api из внешнего интерфейса, тогда вы можете использовать концепцию под названием обратный прокси, если у вас есть какой-либо статический сервер между ними, или обрабатывать маршрут /api перед любым маршрутом * на стороне сервера, чтобы ваш запрос был обработан. сервером иначе.
Взгляните на этот гид, чтобы настроить свой сервер.
Однако есть и умный способ справиться с маршрутизацией. Используя useHash: true. Пожалуйста, посмотрите руководство здесь.
RouterModule.forRoot(routes, { useHash: true })
Хорошо, позволь мне попробовать это и посмотреть
Какой из них вы использовали? Настройка сервера или useHash? Рекомендуется сконфигурировать ваш сервер, а не использовать HashLocationStrategy.
Взгляните на angular.io/guide/deployment#server-configuration, если вы не хотите использовать HashLocationStrategy
я использовал useHash: true
Позвольте мне прояснить - вы делаете следующее:
- посетите yourdomain.com/dist - приложения загружаются нормально
- вы делаете некоторые переходы, например. yourdomain.com/dist/somemodule/somethingelse
- Вы попали на f5
- Возвращается код ошибки 404.
Если я прав, вам нужно настроить правильную перезапись URL-адресов на своем веб-сервере. В основном то, что он делает, возвращает index.html независимо от того, какой URL-адрес запрашивается, если, например,. путь начинается с / dist /
Документация Angular явно объясняет, что нужно сделать, и даже предоставляет пример конфигурации для некоторых веб-серверов.
Я удивлен, что ваше приложение было создано для preducton без того, чтобы вы или команда интеграции знали эти (базовые !!!) концепции.
https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml
Я проверил примеры конфигурации Fallback, но в списке нет ни одного для Nodejs / Express angular.io/guide/deployment#fallback-configuration-examples. Можете ли вы указать на действительный пример.
Как упомянул @Antonoiosss в своем ответе выше, это связано с проблемами переписывания URL-адресов на вашем производственном сервере. Однако резервный вариант для Apache не будет работать для меня (даже с базовыми настройками, которые у меня есть на моем веб-сервере), указанными в URL-адресе выше.
Следующий пример .htaccess работал у меня,
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
#RewriteCond %{HTTPS} !on
#RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
Вышеупомянутое работало с Угловые 6, 7 и 8. Я закомментировал две строки, которые отвечают за маршрутизацию HTTPS. Однако это, скорее всего, будет включено, когда ваше приложение попадет в реальную производственную среду.
Надеюсь, это кому-то поможет.
Ваше здоровье.!
без --base-href выдает ошибку полифилла main.js и т. д.