Tips

Upgrade multilingual NativeScript app to Angular 4

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

Let's upgrade this app to Angular 4 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 2.5.0.


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

Replace the dependencies and devDependencies.


"dependencies": {
    "@angular/animations": "4.0.0",
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "@ngx-translate/core": "^6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "nativescript-angular": "1.5.0",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.2.0",
    "tns-core-modules": "2.5.2",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "babel-traverse": "6.23.1",
    "babel-types": "6.23.0",
    "babylon": "6.16.1",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.3.5",
    "typescript": "~2.1.0"
  }

3. Install all packages


npm install

4. Edit app.module.ts

The path to the NativeScriptModule class has changed; replace


import {NativeScriptModule} from "nativescript-angular/platform";

with


import {NativeScriptModule} from "nativescript-angular/nativescript.module";

As mentioned ng2-translate is now ngx-translate and has two packages; replace


import {TranslateModule, TranslateLoader, TranslateStaticLoader} from "ng2-translate";

with


import {TranslateModule, TranslateLoader} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";

The TranslateStaticLoader doesn't exsist anymore, this needs to be the TranslateHttpLoader and needs a backslash after the i18n file location; replace


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

with


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

And the NgModule decorator needs a little change; replace


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

with


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

5. Edit app.component.html

We need to change the import of ngx-translate here; replace


import {TranslateService} from "ng2-translate";

with


import {TranslateService} from "@ngx-translate/core";

And we're done!

Please don't forget to check out the sample project NSNL_Multilingual4 (see animation at the top of this article) on Github, which is already upgraded to Angular 4.