As NativeScript 8 has been released, I think it might come in handy to document the steps taken to upgrade an app based on NativeScript 6.5 to the recent NativeScript 8.

Before diving into the upgrade, it´s worth to have a look at the node ersion used: It should be at least Node 12. I recommend to use a NVM and have a .nvmrc file in each project folder so you have a defined environment to work with.

It turns out that the „migrate“ command of NativeScript 8 does appearently not behave the same as that of NativeScript 7, we should not do a jump from 6.5 to 8 but instead a step-by-step migration, meaning first migrating to 7 and from there to 8.

Thus, the scope of this article will be to migrate the app to NativeScript 7, going up to 8 will be a fllo-up post. To tackle this, our first input are the upgrade notes from the release-blogpost for NativeScript 7.

That includes:

• Install the last version of NativeScript 7: npm i -g nativescript@7.2.1
• run tns migrate

Which runs just fine in our case. Good thing to see it creates a .migration_backup folder for files it changes or deletes, so we do not solely rely in our version control.

So, lets try to run the converted project with a tns run android.

Turns out, the migratedid not automatically convert the platform dependencies, so I had to make sure, these are set with the correct version in devDependencies:

    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "7.2.0",

And after another try running tns run android, I get the following error:

ERROR in The target entry-point "listview-directives" has missing dependencies:
 - nativescript-angular/element-registry
 - nativescript-angular/renderer
 - ./../
 - tns-core-modules/platform
 - tns-core-modules/ui/layouts/layout-base
 - tns-core-modules/data/observable-array
 - tns-core-modules/ui/core/view
 - tns-core-modules/data/observable
 - tns-core-modules/color
 - tns-core-modules/ui/layouts/stack-layout

This reveals that some part of the app if not fully migrated as using „tns-core-modules“ has been deprecated and should be replaced with tns-core-modules.

As I cannot find any in my code base, I check the dependencies and find that there is an updated version of „nativescript-ui-listview“ available; „9.1.0“.

I also need to upgrade the nativescript-localize plugin as the version I was using is not compatible to the changes introduced with NativeScript 7. After some investigation, it turns out that the plugin has moved around a bit and it now community-maintained and available as @nativescript/localize (github, npmjs). Version 5.0.4 seems to be working fine for me.

This help, and now I get complains:

references.d.ts:1:22 - error TS6053: File '/Users/me/src/mobile-app/node_modules/@nativescript/core/tns-core-modules.d.ts' not found.

1 /// <reference path="./node_modules/@nativescript/core/tns-core-modules.d.ts" />
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
references.d.ts:2:22 - error TS6053: File '/Users/me/src/mobile-app/node_modules/tns-platform-declarations/ios.d.ts' not found.

2 /// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
references.d.ts:3:22 - error TS6053: File '/Users/me/src/mobile-app/node_modules/tns-platform-declarations/android.d.ts' not found.

3 /// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

So I need to udate the references.d.ts file of my project to contain the following as mentioned in the migration blogpost from above.

/// <reference path="./node_modules/@nativescript/types/index.d.ts" />

Now, some „deep import“ references need to get fixed as described in NativeScript 7 import reference, such as:

import * as trace from "@nativescript/core/trace";

to import { Trace } from "@nativescript/core";

or

import * as application from "@nativescript/core/application";

to import { Application, Trace } from "@nativescript/core";

After fixing a lot of those, the app starts up.

It is fully usable up to the point where internally created plugins are used. These have not yet been migrated and will be tackled next.

Stay tuned

Kategorie(n) Android, Mobile, Software, Work
Schlagworte Android, iOS, NativeScript, npm, Upgrade
Kommentar schreiben. Pingen ist im Augenblick nicht erlaubt. | Kommentar - Feed