Upgrading to 3.0

[Ericky]

Hello,

 

I upgraded the plugin to version 3.0 and I am running into an issue when running the same code which worked before.

It appears to be related to the list view. Look at attached screenshot.

[Nikolay Tsonev]

Hi Ericky,

Try to remove platforms and node_modules folders from the project and to clear npm cache with

npm cache clean

Also, delete the application from the emulator. Then try to rebuild the application with 

tns run android

 In case this does not resolve your issue, please provide some sample project, which could be debugged locally. It would help if you could provide and info about your environment (NativeScirpt CLI, modules, node versions),
Thank you in advance for your cooperation.

Regards,
nikolay.tsonev
Progress Telerik

[Ericky]

Here is the test application. I just simply added nativescript-telerik-ui plugin and tried to use the RadListView.

 

Sample App

[Nikolay Tsonev]

Hello,

Can you please check which version of the -angular plugin are you using? You should be using:
"-angular": "~3.1.0", if no,  please change the version of the plugin in your project package. file
 Bear in mind that you should also remove node_modules, and hooks folders before rebuilding the app.

Let me know if I could assist you further.

Regards,
nikolay.tsonev
Progress Telerik

[Ericky]

Hello Nikolay,

 

That solved that issue. But now I am getting more errors related to the RadListView. You can see them in the screenshots attached.

There should be an article or something about the breaking changes in this new version.

 

Examples of the code that worked and isn't working anymore.

<RadListView *ngIf="conversations.length" [items]="conversations" rows="0" (itemLoading)="onItemLoading($event)" backgroundColor="transparent"
      selectionBehavior="None" swipeActions="true" (itemSwipeProgressChanged)="onCellSwiping($event)"
      (itemSwipeProgressStarted)="onSwipeCellStarted($event)" (itemTap)="viewConversation($event)">
      <ng-template tkListItemTemplate let-item="item" let-index="index">
        <GridLayout rows="auto">
          <StackLayout class="conversation" [class.first]="index === 0" [class.last]="index === conversations.length - 1">
            <DockLayout orientation="horizontal">
              <Label dock="right" [text]="item.dateString" verticalAlignment="center"></Label>
              <Label dock="left" class="title" [text]="item.otherUserCard.fullName" verticalAlignment="center"></Label>
            </DockLayout>
            <Label *ngIf="item.message" class="last-message" [text]="item.message"></Label>
          </StackLayout>
        </GridLayout>
      </ng-template>

      <GridLayout *tkListItemSwipeTemplate columns="auto">
        <StackLayout id="delete-view" class="delete-button" (tap)="delete($event)">
          <StackLayout orientation="horizontal" horizontalAlignment="center">
            <Label id="icon" class="btn icon" [text]="'\ue81c'" verticalAlignment="center"></Label>
          </StackLayout>
        </StackLayout>
      </GridLayout>
    </RadListView>

<RadListView #radListView scrollPosition="Top" backgroundColor="transparent" (itemLoading)="onItemLoading($event)" #contactsView [items]="filteredItems">
    <ListViewLinearLayout *ngIf="showContacts" tkListViewLayout scrollDirection="Vertical" itemHeight="140"></ListViewLinearLayout>
    <ng-template tkListItemTemplate let-item="item" let-index="index">
      <StackLayout class="item" [class.first]="index === 0" (tap)="itemTapped(item)">
        <ink-list-user *ngIf="showContacts" [user]="item"></ink-list-user>
        <ink-list-event *ngIf="showEvents" [event]="item"></ink-list-event>
        <ink-list-connection *ngIf="showConnections" [connection]="item" [selected]="selected.indexOf(item) > -1"></ink-list-connection>
      </StackLayout>
    </ng-template>
  </RadListView>

 

Thanks.

[Nikolay Tsonev]

Hi,

Indeed there was a problem while using RadListView in NativeScirpt Angular 2 application, which was related to a change in the nativescript-angular plugin, which brakes using ng-template.

However, this is already fixed in our upcoming release and to be able to keep work on your project, you could use a @next version of the nativescript-teleril-ui plugin. Also to be able to use the next version you should also change the version of tns-core-modules and nativescript-angular . For further help, you could also review the attached package.json file, where the needed changes have been made.

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.uiprotest",
    "tns-android": {
      "version": "3.1.1"
    },
    "tns-ios": {
      "version": "3.1.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.1.0",
    "@angular/common": "~4.1.0",
    "@angular/compiler": "~4.1.0",
    "@angular/core": "~4.1.0",
    "@angular/forms": "~4.1.0",
    "@angular/http": "~4.1.0",
    "@angular/platform-browser": "~4.1.0",
    "@angular/router": "~4.1.0",
    "nativescript-angular": "next",
    "nativescript-telerik-ui": "next",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.3.0",
    "tns-core-modules": "next",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "babel-traverse": "6.25.0",
    "babel-types": "6.25.0",
    "babylon": "6.17.4",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.4.0",
    "typescript": "~2.2.1"
  }
}

Also make sure to delete platforms, node_modules and hooks folders before rebuilding the app.
Regards,
nikolay.tsonev
Progress Telerik

[Ericky]

Hello,

 

How can I use the "next" version of nativescript-telerik-ui-pro?

 

Thanks for replying.

[Nikolay Tsonev]

Hello,
In your case, you could simply change the package name from nativescript-telerik-ui to nativescript-telerik-ui-pro in your package.json file. For example:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.uiprotest",
    "tns-android": {
      "version": "3.1.1"
    },
    "tns-ios": {
      "version": "3.1.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.1.0",
    "@angular/common": "~4.1.0",
    "@angular/compiler": "~4.1.0",
    "@angular/core": "~4.1.0",
    "@angular/forms": "~4.1.0",
    "@angular/http": "~4.1.0",
    "@angular/platform-browser": "~4.1.0",
    "@angular/router": "~4.1.0",
    "nativescript-angular": "next",
    "nativescript-telerik-ui-pro": "next",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.3.0",
    "tns-core-modules": "next",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "babel-traverse": "6.25.0",
    "babel-types": "6.25.0",
    "babylon": "6.17.4",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.4.0",
    "typescript": "~2.2.1"
  }
}

When the node_modules and platform are removed and the project rebuild with tns run <platform_name> all dependencies will be download again.
Regards,
nikolay.tsonev
Progress Telerik