@ngx-translate Nativescript/Angular application

plugins
nativescriptcore

#1

I just try to create a multilingual NativeScript app base on ngx-translate (i18n) library , I know there is several other plugins on NPM but all of them have some problem or not support Angular 5, so I decided to use this library

I just create simple app base on nativescript-angular angular template and implement ngx-translate to my project and setup my JSON files in app root folder

./assets/i18n/
but as soon as I run my project I getting some errors

System.err: java.net.MalformedURLException: no protocol: ./assets/i18n/en.json

and other error


`JS: ERROR Error: Uncaught (in promise): [object Object]`

this is my dependencies in  Package.json file


`
"dependencies": {
    "@angular/animations": "~5.2.1",
    "@angular/common": "~5.2.1",
    "@angular/compiler": "~5.2.1",
    "@angular/core": "~5.2.1",
    "@angular/forms": "~5.2.1",
    "@angular/http": "~5.2.1",
    "@angular/platform-browser": "~5.2.1",
    "@angular/platform-browser-dynamic": "~5.2.1",
    "@angular/router": "~5.2.1",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "nativescript-angular": "~5.2.0",
    "nativescript-barcodescanner": "2.7.4",
    "nativescript-cardview": "2.0.5",
    "nativescript-fancyalert": "^1.1.2",
    "nativescript-feedback": "^1.1.0",
    "nativescript-google-maps-sdk": "^2.4.3",
    "nativescript-pro-ui": "~3.3.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.5.5",
    "tns-core-modules": "~3.4.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.2.1",
    "@ngtools/webpack": "~1.9.1",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "~4.0.2",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "~1.3.5",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "~0.9.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "sass-loader": "~6.0.6",
    "tslint": "~5.9.1",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  }
}
`

and this is my app.module.ts file



`

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


//Plugins
import { NSModuleFactoryLoader } from "nativescript-angular/router";
import { BarcodeScanner } from 'nativescript-barcodescanner';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';


import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

import { NativeScriptHttpModule } from "nativescript-angular/http";
import { HttpClientModule, HttpClient } from '@angular/common/http';



import * as platform from "platform";
declare var GMSServices: any;

if (platform.isIOS) {
    GMSServices.provideAPIKey("XXX");
}

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

//Data service
// import { DataService } from './shared/dataService/dataService'

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        HttpClientModule,
        NativeScriptHttpModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })
    ],
    declarations: [
        AppComponent
    ],
    providers: [BarcodeScanner,
        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }
`

and TranslateService file

`

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app',
    template: 
        <div>{{ 'HELLO' | translate:param }}</div>
    
})
export class AppComponent {
    param = {value: 'world'};

    constructor(translate: TranslateService) {
        // this language will be used as a fallback when a translation isn't found in the current language
        translate.setDefaultLang('en');

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use('en');
    }
}
`
I just search on every where but I can't find any sample for Nativescript Angular 5 application base on @angular/common/http and ngx-translate and NativeScriptHttpModule can you please some one help me I really confused thanks

#2

Hi @akaco
you can refer this repo


#3

Did you try nativescript-localize plugin? The one advantage I see there would be the additional hooks that allows us to natively translate the app, any iOS specific permission strings, app name etc., can be translated without additional efforts. Besides your app can pickup device’s language by default.


#4

have you read my question ?, all I’m saying is all other plugins have some problem like this plugin it can’t change the language on Runtime


#5

@akaco The repo @multishiv19 shared holds a project that works with ngx-translate package. Looking at your issue, it seems to be a problem with your configuration / setup. So you may refer that particular project’s setup and see if you can reproduce the issue still.

Moreover native mobile apps usually follows the language set by the operating system. So whenever user changes his language in device, the app’s name, language, assets can also be updated to device’s language automatically which is why nativescript-localize may be quite popular.


#6

Hi @manojdcoder thanks for your reply ,that Repo which is @multishiv19 shared it is base on Angular 4 and also setup use on import { Http } from ‘@angular/http’; and if you read update note in angular 5 we have to have use HttpClient on @angular/common/http . also if you see my setup coms from ngx-translate and that setup is same as that repo ,

this app which is we trying to make is for museum and will setup on existing ipod devices which is they give to every visitor, we can’t change device localisation and language base on every museum visitor so this app need to change the language on Runtime …


#7

@akaco Try replacing the below line,

import { NativeScriptHttpModule } from "nativescript-angular/http";
....
imports: [
        NativeScriptModule,
        AppRoutingModule,
        HttpClientModule,
        NativeScriptHttpModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })
    ],

with

import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
....
imports: [
        NativeScriptModule,
        NativeScriptHttpClientModule,
        AppRoutingModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })
    ],

And you don’t have to import / add HttpClientModule from @angular/common/http.


#8

Hi @manojdcoder . Thanks for your help, now fix that problem perfectly , Also I just add
in
shared.module.ts


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// Translate
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule
  ],
  exports: [
    CommonModule,
    TranslateModule
  ]
})

export class SharedModule {}

Work like a charm


#9

@akaco @multishiv19
Hello, how are you, do you have a repository to see how they integrated the translator?


#10

@manojdcoder
Hello how are you, sorry for the inconvenience. I wanted to know if you have any repository with the integration of nativescript-localize, is that I was being the one in the guide and for some reason does not execute me. Haber if you can help me with that.


#11

@terminator10 The plugin repo itself has examples for both Angular and NativeScript Core. By looking at your error log, I guess you haven’t declared title_activity_kimera in your localized strings. It’s usually the app’s name.


#12

Hello,
I wanted to ask you a question. The statement for the translate to work where you did it?

TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })

If I want to use it in all the modules I have because I’m using the default template of the drawer that you did in that case.

When calling it in the other modules, I would only call the sharedModule or how it would be. I’m new to this if you can help me. Greetings.


#13

Hi @manojdcoder,

Hey, could you help me? When I compile my application to production, the ngx-translate plugins are not working. I get the json values ​​and I do not transform it. Now configure the translate module to AoT as it is in the documentation. How do I fix this and can I see my translations correctly?

I was fine with this problem, but it’s old with Http. They also use webpack.config. But in my project there is no such file. Because I’m using a natScript tabNavigation template


#14

Irrespective of template, you must have a webpack.config if you build with webpack. You can create one by copying from the default template.

The original issue from the link seems closed and if you are still facing same issue with latest version of the library try to reopen it. I personally prefer nativescript-i18n plugin, which is more native way.