How to Share React components across multple applications with AEM SPA

[arunaaems506124]

Hi All,

I have 3 AEM SPA react applications within the same AEM repository. All these 3 applicaitions using AEM SPA React framework. Lets say AEM SPA react app a1, a2, a3. these a1, a2,a3 apps generate with maven acrhetype AEM SPA 4.0. As you all know that when we want to create any new component we need to map the specific component to AEM react app page component to display on the page.

My requirement is to re-use the components a1 app in a2 and a3. without mapping these components I am not able to re-use them in the AEM application. 

are there any other ways to resolve this issue?

[Nikhil-Kumar · Accepted solution]

@arunaaems506124 

In AEM SPA architecture every react component to every AEM component. So it's one to one mapping.
In your case as you have a new project under /apps then you need to create a new one to one mapped component once again.

One way is adding the component from first app to second app by updating the page policies (This should solve your issue of reusing the components)

Thanks,
Nikhil 

[neerav_it]

We are also facing similar issue, when we updated page policy in templated , we can see that component available on page but when we add it on page , nothing happens

[santony]

Did this accepted answer work for anybody? I deployed 2 aem spas, lets call it spa1 & spa2, to my local author. I updated the page policies of spa2 to include components from spa1. In a spa2 page, I am able to see and add spa1 components, but then nothing is shown on the page. 

[saddra]

@Nikhil-Kumar - Adding client-libraries into page policy allows the libraries to load in the page. But the angular mapping doesn't work. The angular client library which is loaded first in the page only components belong to that application is loaded on the page.

Example: 

Lets consider two applications as mentioned below:

name: app1

clientlib name: app1.angular

name: app2

clientlib name: app2.angular

I am trying to use app1 angular components into app2 page by allowing the app1 components in the layout container/ responsivegrid and adding the clientlibs either by page policies in the editable template or by directly adding the clientlib in the page component of app2.  

App 2 Page component

head.html

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.css @ categories=['app1.angular','app2.angular']}"/>
</sly>

Body.html

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.js @ categories=['app1.angular','app2.angular']}"/>
</sly>

Scenario 1: When app1 angular js is added first in the categories the page of app2 is empty because its angular components are not mapped. 

Scenario 2: When app1 angular js is added second in the categories list the page in the app2 gets loaded with app2 components but the app1 components are not mapped. 

Either case only the first angular js is working and its components are mapped. Only one app.component.ts gets loaded in the page due to this I am not able to share components from different projects. 

@arunaaems506124 -- Could you please share the solution if you have successfully loaded one application spa component in another application page?

[Sai_Krishna_1404]

Hi Arun, Have you got solution to this issue ?