Language not changing after selecting a value in the LanguagePicker

Radzen Studio Angular
1

So in the past day I worked on translating my project.

I followed the guide, and added the Cultures and selected one as Default.

I then translated the various XLF files, and changed the status to "translated" from "new", meanwhile I kept "final" on the default Culture.

So all should be good.
Now I added in my layout page a language picker, and started the app.

The language picker shows correctly the Cultures I added, and preselects correctly the default one.

The problem is, when changing language, nothing happens. Literally nothing.
I put some console.logs, I can tell you that:

-${locale} always stays the same, even after changing languages, it has the value of my default culture ("de-CH")

I went and looked the code of the LanguagePicker Component and I saw this:

LanguagePickerComponent.prototype.onChange = function (value) {
        var path = location.href.replace(this.value, value);
        if (!location.href.startsWith(path)) {
            location.href = path;
        }
    };

here what I see is, there should be in the URL bar somewhere the current language, so I should have in my URL bar "de-CH" somewhere for this code to work, right?
This is not the case,
so I m wondering if I'm missing some crucial steps to activate the other languages or what I am doing wrong?

here a picture of the DEV tools where I put some breakpoints, as you can see, it will never enter the "if" condition as I don't have the "locale value" inside my URL

radzen issue

2

I recommend checking our help article. After deployment Radzen creates a folder for every culture and the language picker changes the culture. If you are manually deploying follow our guide.

3

@korchev indeed I setup the whole Internationalization following the article you linked.

But the guide relative to the manual deploy seems to be helpful, as I will deploy basically putting the whole application in a docker container which will then run it with the command "npm run build --prod".

Does this mean, in my case, that I will need to manually generate an application for each available language?

So as Radzen already generated the XFL files for each culture I added, the only step missing is to run this command:

ng build --prod --aot ----base-href /foo/bar/de-CH --output-path=dist/de-CH --i18n-file=src/i18n/messages.de-CH.xlf --locale de-CH --i18n-format=xlf

and this will generate a copy of each file for each available culture, is that correct?

Does this mean, once I do this step, I ll be able to run the Project locally with radzen and Internationalization will be enabled? (so it will create the right paths depending on the language, for example => localhost:8000/de-CH/overview

?

Thank you for the support

4

This information is available in the manual deploy article.

5

@korchev thank you for the answer, but I reread the whole manual deploy article one more time, and I'm nost still sure, what steps I need to take, to make Internationalization work locally, so when running on Localhost, being able to use a language Picker component and swap between languages (I need this to test if all strings are of the right lenght and no language is breaking the layout).

So from that article, I understand that I need to generate an application for each culture, but how to do that without deploying is not clear for me,

if you could help me out and show this information from that article if available, I would appreciete it, because I cannot really figure this out.

6

You can do that by changing the default culture in the application settings.

You can't do that without deploying.

1 Like
7

perfect, didn't think about this option! Now I got all the infos I needed, thank you very much

8

@korchev is it possible that the "Manual deploy" article, especially the part about building the dist package with multiple locales, is old and not valid anymore?

My understanding is, I need to create in my /dist build, a subfolder for each culture available, and to do this, you say in the guide to run:

"ng build --prod --aot --output-path=dist/de-CH --i18n-file=src/i18n/messages.de-CH.xlf --locale de-CH --i18n-format=xlf"

and I assume I need to run this as many times as how many cultures I have (ofc changing "de-CH" with the other cultures on each run).

but I cannot even run it once, as my angular CLI tells me:

Unknown option: '--locale'
Unknown option: 'de-CH'

and after googling it seems that these tags are deprecated now, and angular uses a json file for this settings? Is this correct?

and a small edit: if I'm not mistaken, the "--aot" tag is not necessary if running "--prod", as for "--prod", they set "--aot" as default

9

The current Radzen version uses Angular 7. The options are valid for Angular 7 as Radzen uses them during deployment.