EddyVerbruggen/nativescript-localize

Localization does not work, without any error message.

KissBalazs opened this issue · 13 comments

I have just finished the install process:

  • tns plugin add nativescript-localize
  • created localization files (see image)
  • imported NativeScriptLocalizeModule in app.module
    image
    image

But if I try to translate any string, it simply won't work.

Both in TS code (app.component.ts):

export class AppComponent implements OnInit {

    constructor(private router: Router,
                private routerExtensions: RouterExtensions) {
        console.log(localize("test"));
    }

or in template:
<Label text="{{ 'test' | L }}"></Label>does only returns "test" instead of the translated value.

Moved the i18n folder to be under src, instead of app (as I saw in some other clodes threads...)

But now I get the following error:
[19-12-17 15:10:12.476] (CLI) /home/forest/<<........project-name>>/platforms/android/app/src/main/AndroidManifest.xml:24:3-36:14: AAPT: error: resource string/title_activity_kimera (aka org.nativescript.spritz:string/title_activity_kimera) not found.

Followed up this error message, seems like this caused the error: NativeScript/nativescript-cli#3670

But this makes using this lib quite hard.

I am having the same problem in nativescript-vue 6.3.2. The problems is that the Android "strings.xml" is not being updated when you compile the project.

@KissBalazs You have to include 'app.name' property inside all of your translation files. 'app.name' will automatically update 'app_name' and 'title_activity_kimera'.

I have the same issue.

en.default.json:

{
    "app.name": "My App Name",
    "test": "This is a test"
}

I have imported the NativeScriptLocalizeModule in app.module.ts.
I've tried moving the i18n folder into src and app. Both does not work.

I'm using the tns preview to test my changes. Does it not work with the preview?

UPDATE
It just does not work with tns preview because you cant use other plugins there.
It's working fine when I build the apk and test it.

I use tns run ios on NativeScript 7, get no error but translations doesn't work in the same way either.

fodi commented

I'm afraid it's the same for me to. Using NativeScript 7.0.8 with a very simple TypeScript app. It's super frustrating; I've tried moving the i18n directory to the app root, to "src", tried renaming "src" to "app" (and updating appPath to "app" in webpack.config.js)... nothing and no error message either. It would be great to have some more verbal logging, I'm almost certain that language files are not loaded.

I'm having exactly the same experience as @fodi
Fresh install of everything, followed the install instructions line by line and tried copying the JSON files to all sorts of places. They were never loaded, nothing happens, no error message. Using TypeScript and Vue.js with NativeScript. Starting it with tns run in an Android Emulator on Windows. String.xml files in platforms/android/app/src/main/res/values have none of the entries I defined in the .json files.

Everyone, this repo is applicable for NativeScript 6.
For NativeScript 7 localize, check this repo: https://github.com/NativeScript/plugins
In NPM registry: https://www.npmjs.com/package/@nativescript/localize

@dimitrisrk I changed the plugin to the NS7 Version and after restarting it actually showed me an error message about not finding the i18n folder. It wants it to be in 'src/i18n'. I moved the folder there and the error message disappeared. After restarting with "tns run" it partially works.

I can now successfully call localize('user.name') and it returns the correct value.
Using L('user.name') inside the < template > doesn't work. My main.ts contains Vue.filter("L", localize);

Any ideas?

@jogotronic Unfortunately, I have very small experience with Vue apps. I think you should open an issue ticket in nativescript/plugins.

For anyone ending up here after hours of frustration:

In your packages.json' dependencies,
Replace "nativescript-localize" with "@nativescript/localize"

Beware of the package name - the latter is a scoped package living under the main nativescript repo.

The problem is resolved for me after replacing the package.

If it's still not working, run ns clean which deletes the platform, hooks and node_modules folders, then run again. I also made sure to have app.name in .json file.

I still can't make it work. What I've done so far:

  • Installing the dependency npm install @nativescript/localize
  • Creating a json file src/i18n/es.default.json with content { "app.name": "Mi app" }
  • In the ngOnInit of my appComponent I log console.log(localize('app.name'))

The result is a log line with "app.name" instead of the label translated. Am I missing any step?

EDIT Just in case someone is having the same issue and reaches here.
My problem was that the Nativescript app was within a NX monorepo, and @nativescript/localize was installed at root level. After adding the dependency to the Nativescript app's package.json the hooks were registered properly and translations worked fine.