В Angular у вас есть действительно хороший маршрутизатор, который заботится обо всем, что вам нужно. Предварительная выборка данных, охрана определенных маршрутов и даже ленивая загрузка модулей. Все это работает из коробки, что, на мой взгляд, очень здорово.
Когда вы используете Apache для обслуживания публичной/производственной среды, вы хотите иметь красивые чистые URL, например, ‘whatwhat.app/page/3’. Вам потребуется дополнительная настройка, чтобы убедиться, что маршрутизация Angular также срабатывает, когда люди посещают эти страницы напрямую, а не через индекс/домашнюю страницу.
По умолчанию вы получите страницу 404, потому что этот файл физически не находится на сервере. С помощью mod_rewrite вы можете настроить это поведение в Apache, если этот модуль включен (что часто бывает). Конфигурация Apache может быть изменена для каждой папки с помощью .htaccess.
Apache’s mod_rewrite и .htaccess
Просто скопируйте приведенную ниже конфигурацию и поместите ее в файл с именем .htaccess в той же папке, где находится ваш файл index.html. Вот и все!
# Check if mod_rewrite module is available
<IfModule mod_rewrite.c>
# Turn the rewrite engine on and set URI base
RewriteEngine On
RewriteBase /
# Serve files when they are found
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# When file is not found, serve index.html instead
RewriteRule ^ /index.html
</IfModule>
Дополнительно: Запуск вашего приложения Angular из подкаталога
Для этого вам понадобится дополнительная конфигурация, потому что Angular должен знать путь выше. Самый простой способ – добавить тег base в тег <head> в index.html следующим образом: <base href="/app/path/">. Путь должен быть скорректирован в соответствии с вашим, конечно, убедитесь, что это путь выше вашего приложения Angular (который должен быть проигнорирован).
Другой способ – инжектировать его, что может быть проще, если у вас разные конфигурации для каждого окружения (например, dev/acc/prod). Более подробную информацию вы можете найти в документации Angular APP_BASE_HREF.
При использовании подкаталога также измените его в .htacces следующим образом:
- Убедитесь, что файл
.htaccessнаходится в том же каталоге, что и файл Angularindex.html.
Что mod_rewrite сделает для Angular
Для тех из вас, кто хочет получить немного справочной информации о том, что происходит.
То, что делает Apache, это обслуживает файлы вашим посетителям, когда они просят об этом. В случае домашней страницы типа ‘whatwhat.app’ он будет обслуживать index.html. С конфигурацией из .htaccess это немного изменится:
- Когда файл найден, Apache будет обслуживать его для вашего посетителя, что обеспечит загрузку таких активов, как js, css и изображения. Это также включает ваш проект Angular. Это делается с помощью
RewriteCondиRewriteRule. Которые будут просто использовать URI из запроса. - После этого есть еще одно правило
RewriteRuleв качестве запасного варианта, которое выполняется только тогда, когда файл не найден. Оно изменяет любой URI на/index.html. Это заставляет Apache искать файлindex.htmlи обслуживать его вместо этого. В этом случае посетителю будет показано ваше приложение Angular. - Это именно то, что вам нужно, потому что при переходе от ‘whatwhat.app/’ к ‘whatwhat.app/page/3’ Angular сделает всю работу, но если вы посетите ‘whatwhat.app/page/3’ сразу же, Apache попытается найти его. И не сможет. Если вместо этого вы обслужите свое приложение, маршрутизатор Angular загрузится, возьмет на себя эту работу и разрешит ее впоследствии.
- Любая страница 404 – это маршрут, который не может быть найден Angular router, который также должен показать страницу ошибки. Это зависит от вас.
Еще больше возможностей
Вы также можете использовать маршрутизацию по хэштегам, которые не будут отправляться на сервер. Это альтернатива в некоторых случаях, и это может быть полезно для безопасности (если у вас есть параметры, которые вы не хотите отправлять на сервер). Возможно, я напишу об этом в отдельной статье.
Также используете Angular’s i18n и хотите получить чистые URL? Я написал статью Serve Angular i18n with clean URL’s using Apache’s mod_rewrite. Для упрощения перевода приложений Angular вам может понравиться созданный мной инструмент под названием What?!
Я работаю над статьями для других веб-серверов и CDN, следите за мной на Dev.to, чтобы не пропустить их. Есть советы или вопросы? Обращайтесь ко мне в комментариях или в Twitter. Спасибо за чтение!
Фото Andrew Ruiz on Unsplash