У меня проблема с динамическими маршрутами рендеринга на стороне сервера с угловым универсальным.
например:
{ путь: 'room/:slug', Компонент: RoomDetailsComponent }
не будет отображаться на стороне сервера.
{ путь: 'комната/первая комната', Компонент: RoomDetailsComponent }
будет отображаться на стороне сервера.
Я нашел несколько решений для этого, например получение маршрутов из серверной службы. Я думаю, что должен быть лучший, менее хакерский способ сделать это.
Я не использую оба одновременно. Это было показано просто для примера. Если я использую первый, он не работает. второй работает.
Ах понял. Я публикую рабочий stackblitz с тем же примером, пожалуйста, дайте мне знать, если это поможет
Возможно, вам не хватает свойства в объявлении RouterModule, потому что оно должно работать как положено.
Здесь я создаю stackblitz, который вы можете скачать и протестировать с помощью npm run dev:ssr
(такой же пример)
Как вы можете видеть на картинке, динамический параметр отображается на стороне сервера (как он возвращается в ответе документа <body>
)
Прежде всего спасибо, что уделили время моей проблеме! В вашем примере параметр, предоставленный для динамического маршрута, отображается с помощью javascript на стороне клиента. Мне нужно, чтобы это отображалось на стороне сервера. может я что-то упускаю? Вот html-код (часть тела), возвращенный сервером, когда я указал параметр '123': -- <body></body> -- как видите, тело пусто. содержимое тела отображается на стороне клиента.
Это странно, потому что он отображается на стороне сервера, даже если вы запустите команду dev:ssr
и войдете на страницу в своем браузере с отключенным JS, я вижу параметр, переданный на странице.
Не тестируйте stackblitz на самом сайте (поскольку он отображается только с угловым (не универсальным)), чтобы протестировать его, загрузите проект в виде ZIP и установите его локально.
Вы абсолютно правы! Теперь мне нужно выяснить, чем отличается мой код.
Я нашел проблему. на странице был дополнительный охранник, включенный в маршруты ... Большое спасибо за ваше время еще раз
У вас не может быть одного и того же маршрута с динамическими и статическими путями, потому что они будут конфликтовать. Измените его на что-то другое, например
{ path: 'rooms/:slug', Component: RoomDetailsComponent }
и{ path: 'first-room', Component: RoomDetailsComponent }