Как включить навигацию со страницы JSF на определенную страницу Angular?

I wonder if writing new pages at Angular and running them alongside the current JSF client under the same hood make sense, if so, how would you do that?

Пока ваши серверные службы построены из управляемых компонентов (cdi, jsf и т. д.), все пути к ним проходят через некоторые хакерские пути, кроме того, это также может потребовать гораздо больше усилий, чем вы ожидаете.

Если бы у вас была служба restfull на бэкэнде, «написание новых страниц в Angular и запуск их вместе с текущим клиентом JSF под одним капотом» имело бы смысл, и все, что нужно, это некоторые конфигурации перенаправления на стороне jsf для определенных страниц для обслуживания вашего углового приложения или использования стратегии хеш-местоположения. Реализовать такой случай не так уж и сложно. Шаги в основном будут такими:

• Создайте свой угловой проект с тем же контекстным путем, что и ваш jsf context-path плюс имя вашей угловой папки, например:

  ng build --prod --base-href "/myjsfapp/angular/" --deploy-url "/myjsfapp/angular/"

• Создайте папку с именем angular внутри папки веб-приложения jsf и поместите в нее файлы дистрибутива angular.

После выполнения описанных выше шагов ваше угловое приложение будет обслуживаться по пути /context-path/angular/index.html.

Однако доступ к угловым страницам потребует большего внимания. Поскольку угловое приложение представляет собой одну страницу (index.html), все страницы на самом деле являются логическими страницами, обслуживаемыми во время выполнения внутри одного и того же index.html. Вот почему, когда вы пытаетесь получить доступ к одной из ваших страниц, скажем, странице пользователей, внутри вашего углового приложения ваш сервер начнет поиск физической страницы /users.html и вернет http 404. Чтобы справиться с этим, вы можете установить правила перенаправления. или выберите самый простой способ — стратегию хэш-локации. Использование стратегии хэш-локации в вашем угловом приложении легко выполняется путем добавления конфигурации {useHash:true} в вызов forRoot. (Если вы выберете эту стратегию, это должно быть первым шагом)

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

Благодаря стратегии хэш-локации ваши угловые страницы будут доступны с хешированными URL-адресами. Например, http://localhost:8080/myjsfapp/angular/index.html#users