Integrate Angular2 into an existing JSF project

Question

I am exploring a new interface for our JSF portal and am considering Angular2. I want to gradually migrate certain components in a page from JSF to Angular2 / REST. I don't want to use Angular2 for routing, at least not yet, and I don't want Angular to completely capture the page: some components should still be JSF for the foreseeable future.

Ideally, I would wrap the contents of the body of my JSF template with my Angular root component and project the HTML processed by JSF into the root component, so that JSF still works and any Angular components inside the template are matched and everyone can communicate. For instance:.

<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> 

With Angular 1, I would use a transition to make this work. However, as I understand it, Angular 2 content projection does not work on the root component , since the rendered HTML is not considered an Angular-compiled view.

I also considered using the root component of templateURL to dynamically display a page processed by JSF, but this is difficult to implement and does not work very well with the many POSTs that JSF does.

The only way I can do this work is to make the root component of each Angular component that replaces the JSF bit, and on each page load all the components that I use. The disadvantage here is that I need a lot of template code to load every Angular component that I create, and they don't have a common root component, so the connection between them is limited. In addition, I need to configure each Angular component through attributes, but since these are not automatically selected either , I will need to add custom code for each component to pick them up:

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

Then, when I finally replaced the entire interface with Angular, I had to reorganize each component again to use @Input instead of manually extracting information from the attributes.

Does anyone know a better way to do this? Or are JSF and Angular2 just not mixing well?

Answer 1

If you cannot make a full page a rewriting unit, you will have to divide the page into sections and transfer them one section at a time.

Just take a page section, create a JSF component and make it a fully loaded angular 2 application, reusing only HTML and CSS.

If you need to integrate this into the JSF life cycle instead of calling REST web services, you need to enter the data created by angular 2 in the hidden field of the JSF form. Put the data in JSON format and deserialize it on the server using Jackson.

This is probably not worth it, compared to rewriting the application one page at a time using angular 2 and break controllers.

You can configure the server to redirect certain pages to serve static files with angular 2 pages, and the rest under JSF.

Answer 2

Create a wrapper. Component for your application at the root level. After that, you can gradually begin to tear yourself away from your code to convert your parts into components that you can place next to your other HTML.

Yes, you need to go through the @inputs refactoring, but you don't need to do everything at the same time. Start with one component at a time. Just include the Angular 2 component at the root, adding a simple one to make it easier to create components that work around your compiled HTML problem.

My advice for your team is to start by making the individual project clean and small and transferring one function at a time to the new project. You will have better developer experience and a field of vision instead of messy rewriting.