Integrare Angular2 nel progetto JSF esistente

Question

Sto cercando un nuovo framework di frontend per il portale JSF della nostra azienda e sto considerando Angular2. Voglio migrare gradualmente componenti specifici nella pagina da JSF a Angular2/REST. Non voglio utilizzare Angular2 per il routing, almeno non ancora, e non voglio che Angular si occupi completamente della pagina: alcuni componenti avranno ancora bisogno di essere JSF per il prossimo futuro.

Idealmente, vorrei avvolgere il contenuto del corpo del mio modello JSF con il mio componente radice angolare e proiettare l'HTML reso da JSF nel componente root, in modo che JSF funzioni come prima e qualsiasi componente Angolare all'interno del modello vengono raccolti e tutti possono comunicare. Es .:

<h:body> 
    <my-app> 
    <h:panelGroup styleClass="languageSwitcher"> 
     <h:form> 
     <h:selectOneMenu value="#{languageHandler.language}" onchange="submit()"> 
      <f:selectItem itemValue="en" itemLabel="English" /> 
      <f:selectItem itemValue="nl" itemLabel="Dutch" /> 
     </h:selectOneMenu> 
     </h:form> 
    </h:panelGroup> 

    <my-angular-component data-source="/rest/mydata"></my-angular-component> 
    </my-app> 
<h:body> 

Con angolare 1, userei inclusione per fare questo lavoro. Tuttavia, a quanto ho capito, Angular 2 content projection does not work on the root component, poiché l'HTML reso non è considerato una vista compilata angolare.

Ho anche considerato l'utilizzo del componente root templateURL per ottenere la pagina di rendering JSF in modo dinamico, ma è difficile da implementare e non funziona bene con i numerosi POST di JSF.

L'unico modo in cui posso pensare di far funzionare questo è quello di creare un componente radice di ciascun componente Angolare che sostituisce un bit di JSF e in ogni pagina esegue il bootstrap di tutti i componenti che utilizzo. Lo svantaggio qui è che ho bisogno di un sacco di codice boilerplate per eseguire il bootstrap di ogni componente angolare che costruisco, e non hanno un componente root condiviso, quindi la comunicazione tra loro è limitata. Inoltre, avrò bisogno di configurare ciascun componente angolare attraverso gli attributi, ma in quanto questi aren't picked up automatically either avrò bisogno di aggiungere codice personalizzato per ogni componente a raccoglierli:

class MyAngularComponent { 
    constructor(public elementRef: ElementRef) { 
    this.dataSourceUrl = this.elementRef.nativeElement.getAttribute("data-source"); 
    } 
} 

Poi, quando ho finalmente sostituire l'intero frontend con Angolare, devo refactoring ogni componente di nuovo per utilizzare @Input invece di recuperare informazioni dagli attributi manualmente.

Qualcuno conosce un modo migliore per farlo? O semplicemente JSF e Angular2 non si combinano bene?

Answer 1

Se non è possibile creare una pagina intera dell'unità di riscrittura, sarà necessario suddividere la pagina in sezioni e migrarle una sezione alla volta.

Basta prendere una sezione della pagina, creare un componente JSF e renderlo un'app angolare 2 completamente avviata, riutilizzando solo HTML e CSS.

Se è necessario integrarlo nel ciclo di vita JSF anziché chiamare i servizi Web REST, è necessario iniettare i dati prodotti dall'angolare 2 in un campo nascosto di un modulo JSF. Inserire i dati nel formato JSON e deserializzare sul server utilizzando Jackson.

Probabilmente non ne vale la pena, rispetto alla riscrittura dell'app una pagina alla volta utilizzando angular 2 e rest controller.

È possibile configurare il server per reindirizzare determinate pagine per servire file statici che sono Angular 2 pagine, mentre il resto rimane sotto JSF.

Answer 2

Crea un wrapper Componente per l'applicazione a livello di root, dopo di che puoi lentamente iniziare a scheggiare il codice per convertire i tuoi pezzi in componenti che puoi posizionare insieme al tuo altro HTML.

Sì, è necessario eseguire il refactoring di @inputs ma non è necessario eseguire tutto allo stesso tempo, avviare un componente alla volta, abilitare semplicemente il componente Angular 2 alla radice aggiungendo un semplice wrapper per facilitare la creazione di componenti che funziona attorno al problema Compiled HTML.

Il mio consiglio per il team è iniziare a rendere un progetto separato pulito e piccolo e migrare una funzione alla volta nel nuovo progetto. Avrai una migliore esperienza di sviluppo e scoping invece di una riscrittura post-disordinata.