Средний стек: Обновление или ввод прямого URL приводит к «Cannot GET /»?

Question

Я создал веб-страницу с использованием стека MEAN.Angular 5.

Одна проблема, с которой я сталкиваюсь, заключается в том, что я не могу войти в прямой путь URL.например, если я в конце вошел в / home, я получаю это сообщение об ошибке «Cannot GET / home».Это происходит, когда я нажимаю обновить тоже.Страница работает отлично Если я нажимаю на кнопку навигации «домой» с моей домашней страницы.

Например: Это моя страница: https://nameless -hollows-54410.herokuapp.com /

Когда я иду по прямой ссылке, https://nameless -hollows-54410.herokuapp.com / home

Страница не работает.Почему это происходит?

Мой код маршрутизации приложения:

const routes: Routes  = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent},
];

Моя панель навигации:

<li class="nav-item active">
   <a class="nav-link" routerLink="/home">Home
       <span class="sr-only">(current)</span>
   </a>
</li>

Answer 1

Позвольте мне объяснить несколько вещей.

Это не проблема интерфейса.Когда вы вызываете ' / home ' из своего углового приложения, нажав на ссылку, все работает нормально.Поскольку ваше угловое приложение знает маршрут.

Но при прямом вызове ' my-site-address / home ', оно пытается найти маршрут ' / home 'в приложении вашего узла.Поскольку в приложении вашего узла нет маршрута ' / home ', это тупик.

Поэтому проблема заключается в том, что вы напрямую вызываете ' my-site-address / home ',' / home 'не доходят до внешней маршрутизации, вместо этого он пытаетсяМаршрут через приложение узла.

Чтобы решить эту проблему, для каждого маршрута из приложения узла необходимо загрузить файл сборки (для angular, возможно, это «index.html»).

Для этого убедитесь, что для любых неизвестных маршрутов приложение вашего узла загружает файл index.html (угловая сборка).

Ваш код в маршрутизации js узла должен быть похож наthis.

app.use('*', (req, res, next) => {
    res.sendFile(path.join(__dirname, 'angular build file path'));
});

Поместите маршрутизацию к последнему разделу вашего маршрутизатора.

Кроме того, замените «угловой путь к файлу сборки» на угловой путь к файлу сборки, в вашем случае, возможно, «index.html Путь к файлу '.

Вы также можете проверить исходный код (фокус на строке 78 и структуре проекта).