How to implement translation i18n on AEM 6.4 SPA Application

[nileshdchavan]

Hello All,

We are building a SPA application on AEM 6.4. Additionally, we are required to implement the i18n/translation for this SPA application.

Could you please help with the necessary steps? Can we implement it the same way we do it for normal AEM website in AEM 6.3 by creating dictionary and using @i18n directives while content authoring/component html file? Or we have to follow a different way of implementing for SPA website in AEM 6.4? 

Any pointers would be of great help. Please advise. Thank you.

[Jörg_Hoh]

In that case I would implement logic in the SPA which loads the proper i18n dictionary as JSON from AEM.

[hanishb17637780]

> using @i18n directives while content authoring/component html file

Not sure what exactly you mean here. FWIU, @i18n directives are used in HTL. For SPA components, html will not be provided by HTL, but will be generated client-side via the SPA JS. You might want to use the clientside i18n API - Granite.i18n.get

[patrickf5578724]

nileshdchavan Could you please elaborate on your use-case? First, if you want to have the content to be translated, you should leverage the language-copy mechanism [0]. If you are looking for labels and messages, Granite.i18n isn't by default available in the page and we may have to define a strategy to give you access to the internationalization in the context of the page. But before considering such a strategy, we would need to better understand the requirement and eventually consider the most appropriate solution.

[0] Language Copy Wizard

[nileshdchavan]

Hi Patrick,

We are building SPA site using angular framework. We want to leverage Adobe Granite i18n dictionary for translations.

We are planning to use Js Granite api once our application is inside AEM so that we continue managing adding / updating the i18n key & values using translator interface.

However the issue we are facing here is since we are developing the SPA out side of AEM first before moving it to AEM , we are getting compilation errors while referring to Granite i18n api (as Granite reference is not available to angular during compilation)

As other option we are planning to expose dictionary as REST service (servlet) to Angular application. Our query here is - is it recommended to expose dictionary as service ? instead is there any way to avoid compilation errors in agular  and use client side Granite i18n api once SPA is available within AEM.

[ashish2007may]

Hi all, @patrickf5578724 ,We are also planning to use I18n in react spa with AEM. Like @nileshdchavan mentioned, is there a way to mitigate the compilation error of using granite i18n library outside AEM or use a Rest based service or servlet to expose I18n dictionary to react app? please suggest.