Can't get ng2-translate to play ball in Nativescript/Angular application

Question

I'm attempting to build a Nativescript/Angular application with internationalisation. I researched my options and found that ng2-translate should do the trick, together with nativescript-ng2-translate, which should handle the loading of translation files.

However, this does not seem to work. I created an example project that has the same basic structure than my own project. It's a bog standard nativescript/angular project build from the tab template.

The translate pipe never does anything. Calling translate service directly also does not give any results. What am I doing wrong?

Code is here: https://github.com/JuergenSimon/translation-test

Answer 1

I did a lot of head banging with nativescript-ng2-translate plugin as well as with ngx-translate, however couldn't get either of them to work. Using ng2-translate with NativeScript http module seems to be the only way that works right now, at least it did for me. I referred this to make it work. Hope it helps you!

Answer 2

Actually I got it to work after all. What I was missing was to set a default language in app.component.ts. So ultimately, it looks like this:

app.module.ts:

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NSModuleFactoryLoader } from "nativescript-angular/router";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { TranslateModule, TranslateLoader, TranslateService } from "ng2-translate";
import { TNSTranslateLoader } from "nativescript-ng2-translate";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: () => new TNSTranslateLoader("/assets/i18n")
        })
    ],
    exports: [
        TranslateModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        {provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader},
        TranslateService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule {
}

Then imported the TranslateModule again in tabs.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { BrowseComponent } from "./browse/browse.component";
import { HomeComponent } from "./home/home.component";
import { SearchComponent } from "./search/search.component";
import { TabsRoutingModule } from "./tabs-routing.module";
import { TabsComponent } from "./tabs.component";
import { TranslateModule, TranslateLoader } from "ng2-translate";
import { TNSTranslateLoader } from "nativescript-ng2-translate";

@NgModule({
    imports: [
        NativeScriptModule,
        TabsRoutingModule,
        TranslateModule
    ],
    declarations: [
        TabsComponent,
        HomeComponent,
        BrowseComponent,
        SearchComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class TabsModule {
}

And set the default language in tabs.component.ts:

import { Component, OnInit } from "@angular/core";
import { isAndroid } from "platform";
import { SelectedIndexChangedEventData, TabView, TabViewItem } from "tns-core-modules/ui/tab-view";
import { TranslateService } from "ng2-translate";

@Component({
    selector: "TabsComponent",
    moduleId: module.id,
    templateUrl: "./tabs.component.html",
    styleUrls: ["./tabs.component.css"]
})
export class TabsComponent implements OnInit {
    private _title: string;

    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
    }
    ...

The last step could possibly have been done in apps.component.ts as well. After that, the pipe and translate service worked fine.