@ngx-translate Nativescript/Angular application

Question

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

@RoyiNamir Yes mate just see this discourse.nativescript.org/t/… — akaco

Sebastian Denis Sebastian Denis · Accepted Answer · 2019-01-09T21:59:03

It works for me with Angular 7 and NativeScript code-sharing feature.

The first problem with your example is that you should remove "." form the path to your assets. It should be:

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

For me, this resolved the java.net.MalformedURLException, but I also had to change webpack configuration to grab my translations files (eg. /assets/i18n/en.json), so in your webpack.config.js modify this section:

// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
   { from: { glob: "fonts/**" } },
   { from: { glob: "**/*.json" } },
   { from: { glob: "**/*.jpg" } },
   { from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

Check my GitHub repo

@ngx-translate Nativescript/Angular application

3 Answers