Как получить глубокие ссылки для работы в Angular при развертывании на Http Server

Question

Я делаю блог с Angular. Угловые маршруты настраиваются таким образом, что «localhost: 4200 / post / 42» будет переходить к компоненту записи, где я получаю описание сообщения из базы данных MySql на основе идентификатора, предоставленного в URL, например, 42 в этом случае. Работает нормально в режиме разработки. Но когда я развертываю его на веб-сервере apache2, размещенном в Digital Ocean, маршруты не работают, когда я непосредственно публикую ссылку ("www.my-domain.com/post/42") в браузере. Это дает ошибку 404. Я могу настроить файл .htaccess и перенаправить на страницу index.html, но это не соответствует моей цели. Если кто-то публикует URL-адрес блога в социальной сети, то люди, щелкающие по ссылке, не будут приводить их к конкретному сообщению в блоге, вместо этого они будут перенаправлены на домашний компонент.

Есть ли решение этой проблемы? Когда разработчики создают сайты с Angular, как они решают эту проблему?

Answer 1

Одним из способов является использование HashLocationStrategy путем добавления { useHash: true } в функцию RouterModule forRoot, например:

@NgModule({
  imports: [
    ...
    RouterModule.forRoot(routes, { useHash: true }),
    ...
  ],
  ...

Другой способ (рекомендуется) - оставить его по умолчанию PathLocationStrategy и использовать base-href="./" со своей сборкой следующим образом:

ng build --prod --base-href="./"

Читать LocationStrategy для более подробной информации.