Highlighted

How to implement translation i18n on AEM 6.4 SPA Application

Avatar

Avatar

nileshdchavan

Avatar

nileshdchavan

nileshdchavan

08-04-2019

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.

Replies

Highlighted

Avatar

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

910

Correct Answer

1.0K

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

910

Correct Answer

1.0K
Jörg_Hoh
Employee

09-04-2019

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

Highlighted

Avatar

Avatar

hanishb17637780

Employee

Avatar

hanishb17637780

Employee

hanishb17637780
Employee

10-04-2019

> 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

Highlighted

Avatar

Avatar

patrickf5578724

Employee

Avatar

patrickf5578724

Employee

patrickf5578724
Employee

11-04-2019

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

Highlighted

Avatar

Avatar

nileshdchavan

Avatar

nileshdchavan

nileshdchavan

15-04-2019

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.