Reference component in AEM SPA

[Nandujee]

Hi Experts, 

We're extending our application to SPA support, which means all the Touch UI components are extended to SPA and writing the code in Angular.

As mentioned, all the components, which support SPA that would work in the SPA template. There is a reference Touch UI component, which would refer to other AEM components from another AEM page. The logic of the reference touch UI component would be to get the path of the AEM page and add in the sling: include. How can this logic be handled if we convert this into a SPA reference component (angular)? 

I'm raising this as the sling: include can't be handled it in angular component, how to handled this?

Your help would be pretty much appreciated.

Thank you,

Nanda

[Himanshu_Jain]

Which version of AEM you are using ?

Reference component is removed from core components 

Ref: https://www.aemcomponents.dev/

[Nandujee]

Thanks for the response @Himanshu_Jain .

We are using AEM 6.5.10. However, the reference which I mentioned above, it's our custom component. This was provided to our customers in classic UI. Even in the touch UI, it works fine. We are in a situation to give the feature in SPA as well, as most of the pages use this component. do we have any solution for this?

Thanks

Nanda

[Nandujee]

Hi Everyone,

I just want to check, would the "data-CQ-data-path" angular directive resolve the issue? I was studying a few Adobe SPA components and I came across this 

<div

[aemModelProvider]

[cqItem]="getItem(itemKey)"

[cqPath]="getDataPath(itemKey)"

[itemName]="itemKey"

[attr.data-cq-data-path]="getDataPath(itemKey)"></div>

In my understanding, this would provide the parsys (responsive grid) for the SPA application?

Is my understanding correct?

[Nandujee · Accepted solution]

I've implemented the reference component using the AEM model provider directive.