Tag Archives: upgrade

NativeScript 6.0

Wow, a major update was just released today with NativeScript 6.0

It has some awesome features; but since it is a major bump this is when all the breaking changes come out to play. And we have some huge breaking changes in v6.0. The largest change is to remove the legacy build system.

Features

  • New Themes

Android Runtime:

  • AndroidX (breaking change)
  • Worker communication is using the original JSON method, which fixes data corruption issues with data being transferred from worker to main thread.
  • v8 - v7.5
  • Some more SBG Fixes

iOS Runtime

  • JavaScriptCore 12.3
  • Issues with Building application with newer versions of XCode resolved

Webpack

  • process is now no longer forced undefined.
  • No longer need all screens names ending with -page
  • All XML, CSS, SCSS, JS, TS is now included in app
  • Lots and Lots of bug fixes

CLI

  • Node < 10 is not recommended, and < 8 is unsupported
  • XCode < 10 is unsupported
  • TNS Migrate to update your app to 6.0 has been added
  • Lots of bug fixes and changes for full 6.0 support

Core Modules

  • textChange and checkedChange events now fire again in Core
  • Animation of Height/Width
  • New Tab / Bottom Nav components
  • Font Icon Support in Actionbar and Tabviews

Breaking Changes

Now for the fun part; as is the normal reason for a major bump in version is all the breaking changes; this version has a lot, I'll mention the top changes. If you are a plugin developer; some of these will have to be fixed before your plugin will work in 6.0.

  • AndroidApplication.currentContext is removed (use AndroidApplication.context)
  • view.observe has been remove (use view.on)
  • ios.getter has been removed - use property directly.
  • AndroidX support breaks many plugins
  • Application.start is removed (use Application.run)
  • builder.loadPage is removed (use createViewFromEntry)
  • dependency-observable file/class removed
  • showModal deprecated function versions have been removed
  • AndroidActivityCallbacks.onCreate has changed has added additional parameters

Breaking Change: Removal of Legacy and standardize on Webpack

This is one of the largest changes in NativeScript 6. They released 5.4 which made webpack as the standard build, and made legacy the obsolete build system. This made 5.4, a release which had lots of issues. In fact a large chunk of the 5.4's I had to re-enable legacy mode because 5.4 was just too broken to actually work the new webpack only mode. I have another blog post on how to have a side-by-side to help deal with this issue; if you are one of the lucky ones that run into 6.0 issue that are because of webpack. As time progresses, and the issues are ironed out -- the webpack only build does offer a lot of benefits -- but during the transition; it could be a bit dicey...

Some Known Issues:

  • (Webpack) Each workers will drastically increase the size of your application (Fix already in master)
  • (Webpack) Having Workers and HMR don't work properly (use --no-hmr flag)

Running NativeScript 5.4 and NativeScript 6.0 side-by-side.

For those who have been hiding in the hills for a while; you may not have noticed that the cool news for NativeScript is that we have a new version that has been coming for a while. 6.0 was officially released today!

Well 6.0 has been release; and there are a lot of things to like in 6.0, but if 6.0 doesn't work for your app; you might still need to run 5.4 to get your work done. Unfortunately, the NativeScript team did not listen to my advice and release a 5.5 to continue testing the new webpack only builds, so we now have a 6.0 with still a lot of webpack issues and now no easy work around because legacy mode was removed in 6.0.

One of the techniques, I used while testing 6.0RC on plugins and apps and reporting the massive number of issues I ran into; is making my install side-by-side. So now I have a tns5 command which is my tns 5.4.2 install. And then tns is my 6.0 release.

The first step to run a side-by-side install is to do a npm i -g nativescript@5.4.2 to install 5.4.2 (the last 5.4 version) on your machine in the global node_modules. Now depending on the OS; this directory will be in a couple places:

The easiest way to find out where it is stored is to run the following command in your command or terminal shell: npm root -g

Under most linux installs this folder is here:
- /usr/local/lib/node_modules

Under Mac OSX the folder can be in a couple places, depending on how you installed it.
For example because I run nvm on my mac, my folder is located here:
/Users/nathanael/.nvm/versions/node/v10.15.3/lib/node_modules

And on windows 10, it is located typically here:
%USERPROFILE%\AppData\Roaming\npm\node_modules

But using the npm root -g will tell you exactly where it is on your machine.

So first navigate to this folder and find the "nativescript" folder; and then copy it in its entirety to the "nativescript5" folder. This gives you a fully working NS 5.4.2 version in a different folder that won't be overwritten when you do the npm i -g nativescript@latest which will give you the NS 6.x version.

The final piece of this puzzle is creating the tns5 command, on my mac the folder for where to put it is:
~/.nvm/versions/node/v10.15.3/bin

So I created the tns5 symlink to point to ../lib/node_modules/nativescript5/bin/tns

On Linux we needed to create the symlink in /usr/local/bin; and so I created the tns5 symlink to ../lib/node_modules/nativescript5/bin/tns (the exact same relative path as mac)

Steps:

  • npm i -g nativescript@5.4.2
  • npm root -g
  • cd (folder listed from npm root -g command)
  • copy nativescript to nativescript5
  • npm i -g nativescript@latest
  • create a tns5 symlink

This should allow you to have a permanent install of v5.4.2 and then your normal update-able version .

NativeScript 5.30 Released

NativeScript 5.3 only offers a smaller number of fixes and features than usual; but is still well worth upgrading to.

The most interesting update (for me) is actually the Android V8 engine has been upgraded yet again, but this time to a version that offers some nice performance benefits. It is always nice when an upgrade will increase the speed of your app with just a rebuild of it.
In addition some awesome work has been done on the iOS engine that should also result in a speed enhancement.

So just upgrading the runtimes to 5.3 should give you a faster app...

Important Depreciation Notice

In version 5.2 short imports have been depreciated; I do not know when they will no longer actually work; but basically things like require("http") are no long valid; you need to do require("tns-core-modules/http"). The primary reason for this is that webpacking requires the full path; and it has problems with short imports.

Core Modules

The core modules offers the following enhancements and fixes...

Resource ID on Android error fixed during Navigation
Webview and TabView fixes
Icons on Tabview and ActionBar should look better
View classes now have the missing .background* Style options.

Android

Upgrade to V8 7.3.492 - which offers
- Faster Await
- Faster JS Parsing
- Faster Spread Elements
- Embeddins supported in ia32 now
NativeScript Arm64 support built in on release versions
Static Binding Generator fixes and enhancements
Gradle 3.3.2 support.

iOS

Lazy Evaluation - Performance
Many Debugger fixes

CLI

HMR is no longer considered Beta; almost all critical issues with HMR are now resolved.
Several debugger issues resolved



Updating NativeScript

To get updated; you first need to do:
npm i -g nativescript@latest

That will get you the latest version of NativeScript CLI; once you have it; do a "tns --version" and verify it prints out "5.3.x".  Then do a "tns doctor" to verify your environment is up to date and has all the newest support tools you need for a successful build.  

To update a project; you need to do the following:

Latest Runtimes:
tns platform remove android && tns platform add android@latest
tns platform remove ios && tns platform add ios@latest

Latest Core modules:
npm r tns-core-modules --save
npm i tns-core-modules@latest --save

To install Webpack & HMR support:
npm i nativescript-dev-webpack@latest --save-dev
Note: you need to have nativescript-dev-webpack as a development dependency for HMR to work.  

To install latest NativeScript Angular plugin
npm i nativescript-angular@latest --save
You will then need to install the actual angular bits; which as of this post v6 is currently supported.

The addition of all the additional analytics/tracking to the CLI reminded me; you can disable it permanently; if you value your privacy by doing:
tns usage-reporting disable && tns error-reporting disable


Known issues

  • Android Q is not supported properly; The fix is slated for 3.3.1
  • TNS frequently (for me at least) kills the build with "Error is: cp: cannot create directory " and to fix you have to reset your platforms. (This might be more plugin development related corner case)

NativeScript 5.2.0 Released

NativeScript 5.2 offers a wide number of fixes, and is well worth upgrading to. Checkout what has now been fixed and/or enhanced in this awesome release from the NativeScript team.

One of the more interesting things for iOS is the In App Podfile and Src code support. Drop your any src code into the /App_resources/ios/src and/or a Podfile in /App_Resources/ios and your app will automatically build it with your app. So you don't need to create a plugin to test or embed things in your app anymore. Plugins still are good for reusable code; but sometimes you might just have a simple function or Podfile that you just want added to your app.

Important Depreciation Notice

In version 5.2 short imports have been depreciated; I do not know when they will no longer actually work; but basically things like require("http") are no long valid; you need to do require("tns-core-modules/http"). The primary reason for this is that webpacking requires the full path; and it has problems with short imports.

Core ModulesT

The core modules offers the following enhancements and fixes...

Dialog now supports Decimal type
ImageCache now has onError exposed
onDiscardedError now officially in the typings
Android model fixes
iOS Flat Actionbar fixes
Password hint support
Multiple crashes fixes

Android

Upgrade to V8 7.1.302 - which offers
- Stable Sorting
- More bytecode embedded saving 200kb of memory per engine.
- Escape analysis improvements (up to 40% faster)
- globalThis support
- Intl.RelativeTimeFormat support
Android X support
Ability to free Java memory that is being retained by a JS object
Gradle 3.3.1 support.

iOS

OnDiscardedError handler now works properly.
Can now manually free OBJC memory that is being retained by a JS object
Can now call ObjC methods with the same name but different parameters. (I've ran into this bug myself -- woohoo!)
GC tuning parameters
JSC tuning parameters

Fixes in Exception handling
Memory allocation fixes
In App Podfile and native Src code support

CLI

Node 11 support
Angular HMR support (finally fully working!)
--debug-brk on iOS should be working again.
Unit testing should work on Android again.
Fixed High CPU usage issue.
generate splashscreens should work again.
HMR will now update styles.


Updating NativeScript

To get updated; you first need to do:
npm i -g nativescript@latest

That will get you the latest version of NativeScript CLI; once you have it; do a "tns --version" and verify it prints out "5.2.x".  Then do a "tns doctor" to verify your environment is up to date and has all the newest support tools you need for a successful build.  

To update a project; you need to do the following:

Latest Runtimes:
tns platform remove android && tns platform add android@latest
tns platform remove ios && tns platform add ios@latest

Latest Core modules:
npm r tns-core-modules --save
npm i tns-core-modules@latest --save

To install Webpack & HMR support:
npm i nativescript-dev-webpack@latest --save-dev
Note: you need to have nativescript-dev-webpack as a development dependency for HMR to work.  

To install latest NativeScript Angular plugin
npm i nativescript-angular@latest --save
You will then need to install the actual angular bits; which as of this post v6 is currently supported.

The addition of all the additional analytics/tracking to the CLI reminded me; you can disable it permanently; if you value your privacy by doing:
tns usage-reporting disable && tns error-reporting disable


Known issues

NativeScript 5.1.0 Released

For those who upgraded to 5.0.0 last month, it was a bit of a rough ride.  A lot of cool features but a lot of weird corner case broken items.  Fortunately since that point, they have released a several 5.0.x point releases which fixed several of the larger flaws.  5.1.0 actually fixes several of the non-critical smaller flaws and adds some cool new features...   So if you were waiting to jump on the 5.x bandwagon, this should be the stable release you are waiting for!

The quick list of some of the new features in 5.1

Core Modules

Enable modal dialog chaining in IOS - this allows you to have another dialog follow the first; anyone who has tried this in the past; know this was always a pain on iOS.

isScrollEnabled - This allows you to disable scrolling in the scrollbar component.

androidSwipeEnabled - Allows you to disable swiping in the Android tabview control.

You can use the arrow keys to select an option, in this screen shot; the "Plain JavaScript" is chosen and so it is highlighted.

Android

Android AAB (Android App Bundle); support added!

New package.json flag;  suppressCallJSMethodExceptions: true/false - enables suppression of the boolean errors when calling a native function.  This could happen and crash the app.  Now you can suppress them.  (see http://fluentreports.com/blog/?p=581 for more information) 

Java 8 Static method support on interfaces; allows NativeScript to call these Static functions.

extends should now work against standard javascript classes (i.e. non native Android classes); so that you can now do class MyVue extends Vue {}; class blahComp extends MyView {}; and it will work properly.

iOS

CStrings are a bit more resilient when passing to a function that wants them as a pointer to read and possibly write.

Updated JavaScript engine to JSC 12.0

CLI

Several bugs when using hmr are fixed.

Yarn Support

Adding lots more Analytics/Tracking (Don't forget to disable this for your privacy: tns usage-reporting disable && tns error-reporting disable)


Updating NativeScript

To get updated; you first need to do:
npm i -g nativescript@latest

That will get you the latest version of NativeScript CLI; once you have it; do a "tns --version" and verify it prints out "5.1.x".  Then do a "tns doctor" to verify your environment is up to date and has all the newest support tools you need for a successful build.  

To update a project; you need to do the following:

Latest Runtimes:
tns platform remove android && tns platform add android@latest
tns platform remove ios && tns platform add ios@latest

Latest Core modules:
npm r tns-core-modules --save
npm i tns-core-modules@latest --save

To install Webpack & HMR support:
npm i nativescript-dev-webpack@latest --save-dev
Note: you need to have nativescript-dev-webpack as a development dependency for HMR to work.  

To install latest NativeScript Angular plugin
npm i nativescript-angular@latest --save
You will then need to install the actual angular bits; which as of this post v6 is currently supported.

The addition of all the additional analytics/tracking to the CLI reminded me; you can disable it permanently; if you value your privacy by doing:
tns usage-reporting disable && tns error-reporting disable


Known issues

NativeScript 4.2 Released

The new version of NativeScript just dropped today!   As usual the update is worth getting for several features that are shipping in it.

Major Features

  • LiveSync now uses Sockets on Android
  • iOS and Android now support the `discardUncaughtJsExceptions` flags.
  • Simpler Templates (less NPM dependencies)
  • Android now support HTTP Gzip'd packets
  • Debugging Webpacked apps

Minor Features and/ Bug Fixes

  • Android v8 engine upgraded to 6.7.288
  • Android app no longer crashes when closing debugger.
  • Multiple CLI building issues resolved, including LiveSync on modern Android; Gradle issues with Google plugings.
  • Android P support
  • iOS XCode 10 support
  • Several LiveSync fixes
  • Lots of build issues fixed

Known new Issues

  • None so far

NativeScript: Version 2.3.0 Released

ns-versionFor those hiding out in the forest; guess what was released by our cool park rangers at Telerik today!     Yes, you got it - v2.3.0 of NativeScript is now available!   Upgrade Instructions below.

As usual; if you run into any issues I will be putting any common issues at the bottom of this post as I and others run into them....

New or Fixed Features:

  • iOS XCode 8 support for iOS 10 support - * (I've heard this might not be fixed yet)
  • Navigation memory leak squashed
  • Android Text Hint Color supported
  • Buttons now support text-decoration and text-transformation properly
  • iOS d.ts generator works properly
  • Android Extend working properly again
  • Android now properly re-throwing exceptions (better error messages)
  • Android a couple crashing corner cases fixed
  • Observables fixed (was broken in some nested situations in 2.2.0)

A Lot of other smaller bug fixes and enhancements went into place; unfortunately the really big feature for 2.2.0 & 2.3.0 has slipped again -- threads.   It was a lot bigger than they expected; I've seen progress on both Android and iOS on this front; based on the activity it should be showing up in the masters channel soon, meaning we will be able to test and play with it soon.

Upgrading:

First of all to upgrade is done is a couple steps:
> npm install -g nativescript
> npm install tns-core-modules@latest --save

For Android:
> tns platform remove android
> tns platform add android

For iOS
> tns platform remove ios
> tns platform add ios

Then you can type tns info and verify that everything says v2.3.x

Common Issues

Images and a parent that has Color set, causes the image to not show only the color that was set on iOS.   To fix you can do this a couple ways.  Remove the color on the parent.  Upgrade or disable the broken source (Line 133

image._setTintColor(newValue);

in "node_modules/tns-core-modules/ui/image/image.ios.js, comment it out.

NativeScript: Version 2.2.0 released

ns-2.2.0For those living in a dungeon hacking out code; guess what was released by those fine wizards at Telerik today!     Yes, you got it - v2.2.0 of NativeScript is now available!   Upgrade Instructions below.

As usual; if you run into any issues I will be putting any common issues at the bottom of this post as I and others run into them....

New or Fixed Features:

  • Android now properly supports some the of the Java classes that were broken in 2.1 (Major)
  • Nested Bindables
  • Letter Spacing is now all in EM Units (CSS: letter-spacing)
  • CSS supports new properties, more selectors and even pseudo selectors (Major)
  • Android Launch Screen Support
  • Observable's are now auto-nesting (this can cause a breaking changes -- see known issues below)

A Lot of other smaller bug fixes and enhancements went into place; unfortunately the really big feature for 2.2.0 has slipped -- threads.   It was bigger than a single point release could handle; I've seen progress on both Android and iOS on this front; so I have high hopes it will make it in 2.3.0...

Upgrading:

First of all to upgrade is done is a couple steps:
> npm install -g nativescript
> npm install tns-core-modules@latest --save

For Android:
> tns platform remove android
> tns platform add android

For iOS
> tns platform remove ios
> tns platform add ios

Then you can type tns info and verify that everything says v2.2.x

 

Common Issues

Nested Observables might throw an error

(iOS) TypeError: Cannot set property 'disableNotifications' of undefined
(Android) TypeError: undefined is not an object

If you have objects like

var x = new Observable({
y: new ObservableArray([])
});

This will probably throw the above error; eliminate the nesting; and make the structure like this:

var x = new Observable({
y: []
});

Github issue: https://github.com/NativeScript/NativeScript/issues/2457

x86_64 bit Emulator on iOS might crash on code that is fine.

Error:

Service exited due to signal: Segmentation fault: 11

Solution: Switch to a 32bit emulator like the iPhone 4s.

Github Issue: https://github.com/NativeScript/ios-runtime/issues/622

 

Angular 2 cssClasses Incompatibility

ORIGINAL EXCEPTION: TypeError: _this.cssClasses(...).set is not a function

You need to upgrade your NativeScript-Angular version to the latest version; the older version which worked with v2.1.0 of NativeScript is incompatible with v2.2.0. You should be able to do a

> npm install nativescipt-angular@latest --save

 

NativeScript 2.1 released (and common issues/fixes)

WooHoo, 2.1 is finally released.  Lots of things fixed and several other cool new things added; here is some of the changes in v2.1;

  • TNS Clean command!
  • Fix for faster Building (really affects Angular 2 builds)
  • Fix for Google library and default Config issues.
  • several naviation crashing issues fixed
  • several LiveSync issues fixed
  • Lots of other fixes

Now to install this awesome new release in four simple steps:

  1. Install the new version of the NativeScript command line
    • npm install -g nativescript@latest
  2. Remove the existing platform(s)
    • tns platform remove android
      AND/OR
    • tns platform remove ios
  3. Add the platform(s) you need
    • tns platform add android
      AND/OR
    • tns platform add ios
  4. Install the common core modules
    • npm install tns-core-modules@latest --save

 

A couple issues have cropped up in NativeScript 2.1.0 -- Here are the issues with the solutions

  1. If you see "error: constructor RunTimeHelper in class RuntimeHelper cannot be applied to given types" or "com.tns.Runtime runtime = new RuntimeHelper(this).initRuntime();" or "reason: actual and formal argument lists differ in length"
  • This means one of the above is out of sync with the others; all three pieces of the puzzle MUST be 2.1.0 or later.   This is one of those upgrades that requires everything to be in sync.

2. If your app fails to deploy to the phone or android emulator

  • This means one of the above is out of sync with the others; again all three NativeScript pieces MUST be 2.1.0 or later.

3. Missing CFBundleShortVersionString / CFBundleVersion on iOS

  • Open xcode, then open up the file platforms/ios/Internal/NativeScript.framework/Info.plist then add both the keys, and set them to 2.1.0
  • Or once iOS 2.1.1 runtimes has been released; upgrade to the 2.1.1 iOS runtimes.

4. Error: java.lang.runtimeException:Unable to create application
with next error being   Java.lang.ClassNotFoundException com.tns.FragmentClass

  • npm install tns-core-modules@latest --save
    Then you can build/run it as normal.

5, No errors, but no deploy either (android)

  • npm remove -g nativescript
  • npm cache clean
  • npm install -g nativescript
  • tns platform clean android   <-- Done inside your project

Downgrading NativeScript

You might have decided to be an early adopter of the awesome new version of NativeScript release and then unfortunately do to some bug regretted that choice.   Well here is how to easily downgrade back to a version you prefer.

First of all, you normally do NOT need to downgrade the actual TNS / nativescript command, it is normally backwards compatible.  However if you do need to downgrade the command line utility you need to type:

npm remove -g nativescript

and then
npm install -g nativescript@version --- where version is the version you want.

Ok, now onto the two pieces that you should do at the same time.  So lets say you want to downgrade to the latest v1.6; you change to your apps main directory and would type:
npm install tns-core-modules@1.6.2

then type for android:
tns platform remove android
tns platform add android@1.6.3

and finally if for iOS:
tns platform remove ios
tns platform add ios@1.6.0

By doing these items, you will fully downgrade your app to a prior version of NativeScript.

Please note to get the version numbers of all the releases of a particular item; you can do:

npm info tns-android versions
npm info tns-ios versions
npm info tns-core-modules versions

You typically want the latest of a point release version, so you find the latest "z" version in the x.y.z branch you are looking to install. Please note the versions 2.0.0-YYYY-MM-DD-VVV like 2.0.0-2016-05-03-553 is a alpha/beta/test releases; all these dated versions you can safely ignore them.