4

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

Improve this question
2
  • 2
    Did you find a solution to that ? Commented Jan 25, 2018 at 16:06
  • 1
    @RoyiNamir Yes mate just see this discourse.nativescript.org/t/… Commented Jan 27, 2018 at 0:14

3 Answers 3

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I have tried to implement your solution and although i remove the '.' from the path I still get the error: "message": "Http failure response for ./assets/i18n/home/en.json: 0 Unknown Error" Do you have any idea why the path change is ignored?
@MrfksIV strange, have you tried to stop everything and build it again (maybe also remove "platforms" directory)?
your solution is working, I was just forgetting to change it in all ngModules
2

ngx-translate working "nativescript-angular": "~8.20.3",

use @danvick/ngx-translate-nativescript-loader plugin (modifing accesing json file from http to native getfile)

https://market.nativescript.org/plugins/@danvick%2Fngx-translate-nativescript-loader

Pay attention do not install @ngx-translate/http-loader. you'll get an error when trying to access language.json with http use @danvick/ngx-translate-nativescript-loader from plugin above to get from app folder language json file place json files inside directly assets folder (my example) then in app.module

import { TranslateModule, TranslateLoader } from "@ngx-translate/core"; import { NativeScriptLoader } from '@danvick/ngx-translate-nativescript-loader'; ... export function createTranslateLoader() { return new NativeScriptLoader("./assets/", ".json"); } imports: [ AppRoutingModule, NativeScriptModule, NativeScriptUISideDrawerModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: createTranslateLoader } }), ],

modify webpack.config.js to copy "lang".json to app (by default native will copy to app assets folder only fonts , png files and jpg files) by adding this line { from: { glob: "assets/**" } }, where language json are placed(inside i18n folder or not) - check if json files are copied inside platforms/ios|android/nameofapp/assets folder

new CopyWebpackPlugin([ { from: { glob: "fonts/**" } }, { from: { glob: "assets/**" } }, { from: { glob: "**/*.jpg" } }, { from: { glob: "**/*.png" } }, ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
Improve this answer

Comments

0

There is a good tutorial by Nic Raboy

https://www.thepolyglotdeveloper.com/2017/01/internationalization-nativescript-mobile-app-angular/

I can confirm that it works on NativeScript 5.4

But I would definitely recommend you use ngx-translate insted of ng2-translate, which is used in Nic's article.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.