JSON key displayed instead of translating strings

Question

For some reason, the code below does not translate my strings, ie it displays my json KEY (ex: MY_NEW_SITES). Hope you will see something wrong on what I am doing

Here is the code

main.ts

    // this import should be first in order to load some required settings (like globals and reflect-metadata)
    import { nativeScriptBootstrap } from "nativescript-angular/application";
    import { AppComponent } from "./app.component";

    // angular 
    import { Component, provide } from '@angular/core';
    import { HTTP_PROVIDERS } from '@angular/http';

    // libs
    import { TranslateLoader, TranslateService, TranslatePipe } from 'ng2-translate/ng2-translate';
    import { TNSTranslateLoader } from 'nativescript-ng2-translate/nativescript-ng2-translate';
    import { TNSFontIconService } from 'nativescript-ng2-fonticon';

    nativeScriptBootstrap(AppComponent, [
      HTTP_PROVIDERS,
      provide(TranslateLoader, {
        useFactory: () => {
          // pass in the path to your locale files
          return new TNSTranslateLoader('assets/i18n');
        }
      }),
      TranslateService,
      provide(TNSFontIconService, {
          useFactory: () => {
            return new TNSFontIconService({
              'fa': 'font-awesome.css'
            });
          }
        })  
    ]);

site.ts

import { Component, OnInit, ViewChild } from "@angular/core";

import { TranslateService, TranslatePipe } from 'ng2-translate/ng2-translate';

import { TNSFontIconService, TNSFontIconPipe } from 'nativescript-ng2-fonticon';
import { TNSTranslateLoader } from 'nativescript-ng2-translate/nativescript-ng2-translate';

@Component({
  templateUrl: 'pages/sites/sites.html',
  pipes: [TranslatePipe, TNSFontIconPipe]
})

export class SitesPage {
  public sites: ISiteInfo[];

  constructor(
              private fonticon: TNSFontIconService,
              translate: TranslateService) {

    this.sites = [];
  }
}

sites.html

<ActionBar [title]="'MY_NEW_SITES' | translate">
  <ActionItem (tap)="settings()">
    <StackLayout>
      <Label [text]="'fa-cog' | fonticon" class="fa"></Label>
    </StackLayout>
  </ActionItem>
  <ActionItem (tap)="addSite()"
      ios.position="right"
      android.position="popactionBarup">
    <StackLayout>
      <Label [text]="'fa-plus' | fonticon" class="fa"></Label>
    </StackLayout>
  </ActionItem>
</ActionBar>

  <StackLayout>
      <Label [text]="'MY_NEW_SITES' | translate"></Label>
  </StackLayout>

Under app/assets/i18n, I have my 2 json files, ie en.json and fr.json

ex:

en.json

{
   "MY_NEW_SITES": "My New Sites"
}

fr.json

{
   "MY_NEW_SITES": "Mes nouveaux sites"
}

score 1 · Answer 1 · answered Jun 02 '16 at 13:20

1

It is because your are not passing your property MY_NEW_SITES but a string 'MY_NEW_SITES'

Change this

  <StackLayout>
      <Label [text]="'MY_NEW_SITES' | translate"></Label>
  </StackLayout>

to this

  <StackLayout>
      <Label [text]="MY_NEW_SITES | translate"></Label>
  </StackLayout>

And your issue is solved (same applies to your title binding)

answered Jun 02 '16 at 13:20

Nick Iliev

9,610
3
35
89

Hi Nick, thanks to put me on track. Now the issue is it does not show anything! The ActionBar [text] displays my project name and the Label [text] is empty. What does it sounds to you? By the way [here](https://github.com/NathanWalker/nativescript-ng2-translate) it shows that my string has to be between single quote. – David Jun 02 '16 at 22:56
Found the issue! I still need to use the single quote AND need to assign the language in the constructor, for example. So in constructor, translate.use('en') – David Jun 02 '16 at 23:46
The example from NathanWlaker is doing the same.. basically its says.. if you have a translate value load it .. else load the default string "HOME" (e..g in your case "MY_NEW_SITES" will be visualized if you don;t have a translate value to load..) – Nick Iliev Jun 03 '16 at 10:32

JSON key displayed instead of translating strings

1 Answers1