Tips

Upgrade multilingual NativeScript app to Angular 5

If you created a multilingual app following " How to create a multilingual NativeScript app with Angular 4?" you have an app based on Angular 4.

Let's upgrade this app to Angular 5 and the latest version of ng-translate!

1. Remove directories

With the following commands we remove the hooks, node_modules and platform directories, because they contain old files and packages.


rm -rf hooks
rm -rf node_modules
rm -rf platforms

2. Update package.json

Update the NativeScript iOS en Android packages to 3.4.1.


"tns-ios": {
   "version": "3.4.1"
 },
 "tns-android": {
   "version": "3.4.1"
 }

Replace the dependencies and devDependencies.


"dependencies": {
    "@angular/animations": "5.2.0",
    "@angular/common": "5.2.0",
    "@angular/compiler": "5.2.0",
    "@angular/core": "5.2.0",
    "@angular/forms": "5.2.0",
    "@angular/http": "5.2.0",
    "@angular/platform-browser": "5.2.0",
    "@angular/platform-browser-dynamic": "5.2.0",
    "@angular/router": "5.2.0",
    "@ngx-translate/core": "9.1.1",
    "@ngx-translate/http-loader": "2.0.1",
    "nativescript-angular": "5.2.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.5.2",
    "tns-core-modules": "3.4.0",
    "zone.js": "~0.8.4"
  },
  "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.6.0",
    "typescript": "~2.6.2"
  }

3. Install all packages


tns install

4. Edit app.module.ts

Http has changed in Angular 5, introducing the HttpClient; so we need to changed the imports a little.

Replace this


import {NativeScriptHttpModule} from "nativescript-angular/http";
import {Http} from "@angular/http";

with


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

And for more consistency with other plugins like nativescript-barcodescanner; replace translateLoaderFactory with createTranslateLoader and define http as HttpClient


// for AoT compilation
export function translateLoaderFactory(http: Http) {
    return new TranslateStaticLoader(http, "/i18n", ".json");
};

with


// for AoT compilation
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, "/i18n/", ".json");
};

And the NgModule decorator needs a little change; replace


NativeScriptHttpModule,
TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        deps: [Http],
        useFactory: (translateLoaderFactory)
    }
})

with


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

And we're done!