angular-l10n used in angular component being imported from react parent application as library doesnot work

[nishantks15]

I have a angular project which uses this L10nTranslationModule from angular-l10n. This angular project compiles and creates library.

This angular project (library) is being used/imported from react client application and the translation does not work. It doesn't give any error.

I cannot import angular-l10n in react as it is unsupported there. Am I missing anything while implementing ?

Simple feature of this.translationService.setLocale('en-US') at one place and getting this locale at other place gives blank value instead of 'en-US'

[robisim74]

Without any relevant information, it is not possible to determine what is happening in your project, and no help can be provided.

• Which version of Angular and this library are used in your project?
• What did you use to get a library from a cli app? ng-packagr?
• Are you exporting only components to the library?

If you are exporting only the components, the library is most likely not initialized. Initialization defines the locale, loads translation files etc. otherwise you get only empty values. Therefore it is necessary to call L10nTranslationModule.forRoot in AppModule orprovideL10nTranslation in a standalone app (from Angular v16).

See also this issues:

• https://github.com/robisim74/angular-l10n/issues/307
• https://github.com/robisim74/angular-l10n/issues/146

Greetings

[nishantks15]

I have created custom angular library in Angular version 9. angular-l10n library used in this custom angular library is implemented correctly(including L10nTranslationModule.forRoot in AppModule) as when I import this custom library from another angular project with version 15 then it works fine. It does translation to different languages.

But when I use this custom angular library from React project then it doesn't work. What doesnot work ? After setLocale, getLocale does not give value back.

[robisim74]

I'm sorry, but using an Angular app, transformed into a library, inside a React app is not a common or project-supported scenario.

Again, if you want help you need to enable me to recreate the problem or provide minimal reproduction.

I have some basic information:

• are you using React (which version?), or NextJs, or something else?
• how do you import the library into React app?
• how do you consume it?

And again: does everything in the Angular library work once imported into React? Angular routing, other libraries using forRoot?

And then regarding angular-l10n you should debug it and see if it is initialized: are the translation files loaded? setLocale changes the locale at runtime, but only if it has been initialized, otherwise it does nothing

[nishantks15]

• "react": "16.14.0",
• I am importing my custom library which uses angularl10n
• The component which is exposed from my custom library has some params e.g.
  <ngx-incident-manager ref={element} language={lang} />

so this way I am passing language and then custom library uses this language to set to ln10translation service of angular10n and then I use getLocale at some other place e,g. interceptor to send this language as part of each request to backend api.

Bases on this language we load the translation file dynamically. Now since we are not getting any value from getLocale, we are not able to load translations or read from interceptor or any other file.

[robisim74]

The code of this library is open source: here is the list of versions, and here the v9 branch

And finally here the setLocale method: https://github.com/robisim74/angular-l10n/blob/angular_v9/projects/angular-l10n/src/lib/services/l10n-translation.service.ts#L49-L51

• What do you notice in the method signature? Is the locale a string or an object of type L10nLocale?
• What does the function do? Does it load translation files?
• And what happens if the locale is incorrect or the configuration is not initialized? https://github.com/robisim74/angular-l10n/blob/angular_v9/projects/angular-l10n/src/lib/services/l10n-translation.service.ts#L163
• And why does it release the new locale only after it has loaded the files? https://github.com/robisim74/angular-l10n/blob/angular_v9/projects/angular-l10n/src/lib/services/l10n-translation.service.ts#L173

Before you can use a library in an unconventional way, you should understand how it works, or provide the code you are trying to use.

Hope this helps.

Greetings

[nishantks15]

• What do you notice in the method signature? Is the locale a string or an object of type L10nLocale? ->

  public async ngOnChanges(changes: SimpleChanges) { if (changes.language?.currentValue) {

  await this.translationService.setLocale({ language: changes.language.currentValue }); } this.ref.detectChanges(); }

• What does the function do? Does it load translation files? Yes it does load translation and then use translateAysnc pipe in html

[robisim74]

@nishantks15 What happens in your app at the following points I reported above?

https://github.com/robisim74/angular-l10n/blob/angular_v9/projects/angular-l10n/src/lib/services/l10n-translation.service.ts#L163

https://github.com/robisim74/angular-l10n/blob/angular_v9/projects/angular-l10n/src/lib/services/l10n-translation.service.ts#L173

Without a reproduction, you need to provide at least the result of a debug.

[robisim74]

Closing due to lack of reproduction and feedback.