Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How to implement translation i18n on AEM 6.4 SPA Application

Avatar

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
nileshdchavan
Level 2

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

Avatar

Avatar
Coach
Employee
Jörg_Hoh
Employee

Likes

1,081 likes

Total Posts

3,121 posts

Correct Reply

1,061 solutions
Top badges earned
Coach
Give back 600
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Coach
Employee
Jörg_Hoh
Employee

Likes

1,081 likes

Total Posts

3,121 posts

Correct Reply

1,061 solutions
Top badges earned
Coach
Give back 600
Ignite 5
Ignite 3
Ignite 1
View profile
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.

Avatar

Avatar
Boost 5
Employee
hanishb17637780
Employee

Likes

7 likes

Total Posts

23 posts

Correct Reply

6 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Affirm 5
Affirm 3
View profile

Avatar
Boost 5
Employee
hanishb17637780
Employee

Likes

7 likes

Total Posts

23 posts

Correct Reply

6 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Affirm 5
Affirm 3
View profile
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

Avatar

Avatar
Boost 1
Employee
patrickf5578724
Employee

Like

1 like

Total Posts

3 posts

Correct Reply

1 solution
Top badges earned
Boost 1
Affirm 1
View profile

Avatar
Boost 1
Employee
patrickf5578724
Employee

Like

1 like

Total Posts

3 posts

Correct Reply

1 solution
Top badges earned
Boost 1
Affirm 1
View profile
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

Avatar

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
nileshdchavan
Level 2

Likes

10 likes

Total Posts

27 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
nileshdchavan
Level 2

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.