Маршрутизация на статическую html-страницу в Angular 6+

У меня есть проект Angular с тремя компонентами: страна, регион, дом. Когда я загружаю домашнюю страницу, у меня есть настройка маршрута к HomeComponent, которая содержит гиперссылки для маршрутов. Все работает просто отлично и ведет себя как одна страница (SPA). Теперь я хочу добавить статическую HTML-страницу и перейти к ней. Я просмотрел документацию Angular Route и не смог найти способ сделать это. Вот вопросы у меня

  1. Где я могу разместить свои статические HTML-страницы
  2. Как перенаправить эти файлы в app-routing.module.ts

Репозиторий Github: SpringTestingUI


angular angular-routing angular-router
person Pavan Jadda    schedule 21.11.2018    source источник
comment
Почему бы вам не превратить ваш статический файл в компонент?   -  person M. A. Cordeiro    schedule 21.11.2018
comment
Статическая HTML-страница не содержит динамического (т.е. углового) содержимого. Таким образом, он не может быть маршрутизирован. Вместо этого вы можете создать компонент, который загружает ваш статический контент в iframe и перенаправляет к этому компоненту.   -  person The Head Rush    schedule 21.11.2018
comment
Вы бы использовали обычную ссылку: <a href="/path/to/static-page.html">. Вы можете поместить его в активы или настроить активы в файле angular.json, чтобы поместить его туда, где вы хотите, или просто положиться на свой реальный рабочий сервер, чтобы обслуживать его с любого URL-адреса, который вы выберете.   -  person JB Nizet    schedule 21.11.2018
comment
@TheHeadRush Означает ли это, что Angular не поддерживает многостраничное приложение?   -  person Pavan Jadda    schedule 21.11.2018
comment
@JBNizet Я пробовал, не работает   -  person Pavan Jadda    schedule 21.11.2018
comment
Мы не можем помочь с неизвестным кодом, вызывающим неизвестную проблему   -  person JB Nizet    schedule 21.11.2018
comment
@Jadda Angular — это одностраничный фреймворк для приложений. Вы можете обмениваться данными между угловыми приложениями, но только с помощью неугловых функций, таких как cookie или localStorage.   -  person The Head Rush    schedule 21.11.2018
comment
@TheHeadRush Angular не требует создания наших приложений как SPA. Пожалуйста, прочтите эту статью. blog.angular-university.io/. Существует способ сделать многостраничное приложение Angular.   -  person Pavan Jadda    schedule 01.12.2018
comment
Я могу предоставить дополнительный контекст для желания сделать это, потому что я недавно наткнулся на это. Если у вас есть статическая страница или динамическая страница, управляемая в другом месте (в моем случае GraphQL Playground или GraphIQL), и вы думаете об использовании маршрутизации Angular, чтобы заблокировать ее для авторизованных пользователей, вы можете подумать о том, чтобы выбрать путь OP. В моем случае я не использовал Angular и просто использовал статический href и опирался на сервер для обработки авторизации.   -  person Tim Hardy    schedule 21.09.2019

Ответы (1)


arrow_upward
36
arrow_downward

Немного опоздал с этим, искал генератор Angular для статического html, наткнулся на это и решил, что заскочу. Сегодня я действительно научился делать именно это.

Статическая HTML-страница в основном ничем не отличается от другого статического ресурса, такого как таблица стилей или изображение, поэтому мы можем обращаться с этими страницами точно так же.

Следуя документам по настройке ресурсов Angular, мы можем создавать наши HTML-файлы и ссылаться на них в приложение через .angular-cli.json или angular.json в зависимости от ситуации.

Одна вещь, которую я нашел особенно полезной, — это возможность вручную настроить ссылочный путь для html-страницы, когда она разрешается браузером.

Например, если у нас есть html в каталоге src/static-pages/page1.html, по умолчанию, если вы добавите этот путь в раздел assets вашего angular.json, он будет существовать по маршруту http://hostname/static-pages/page1.html. Angular позволяет вам изменить путь разрешения для этого ресурса так, как вы хотите, предоставив несколько дополнительных фрагментов информации в разделе ресурсов при ссылке на ваш статический HTML или другой ресурс.

Ex:

// angular.json

{
   ...

   "assets": [
       // This page is routed /static-pages/page1.html
       "src/static-pages/page1.html",
       
       // This page is routed /home/page1.html
       { "glob": "page1.html", "input": "src/static-pages/", "output": "/home/" }
   ],
 
   ...
}

Основное различие между этим и созданием визуального компонента, отображающего только статический HTML, заключается в том, что это позволяет поисковому роботу индексировать эту HTML-страницу. Если вы просто хотите отображать статический HTML-текст, я бы создал дополнительный компонент SPA в Angular и выполнил маршрутизацию, как обычно, в вашем файле HomeComponent.

person Tony M    schedule 11.06.2019
comment
Ваш ответ решает ту часть, где размещать статические HTML-файлы, но можно ли перейти к этому файлу из app-routing.module.ts? - person pepipe; 03.06.2020
comment
@pepipe Я бы предположил, что нет. Я действительно не разрабатывал в Angular какое-то время (+1 год или около того), но, поскольку Angular полагается на свои собственные компоненты (то есть на TypeScript @Components), вы не получите такого же эффекта. В конце концов, если вы создадите легковесный компонент для обертывания html, он все равно окажется в комплекте с JS. Я предполагаю, что это зависит от вашей цели: если вы хотите иметь статический html, который по-прежнему оптимизирован для SEO, решение, приведенное выше, является вашим лучшим выбором, но если вы просто хотите направить простой контент, то создайте компонент + routing.module. тс работает нормально. - person Tony M; 09.06.2020