ListView - JS Error (rootLocator is undefined)


#1

I have started working with NativeScript’s Pro UI and ran into an issue when trying to use ListView in my project. I am receiving the following error message…

JavaScript error:
file:///app/tns_modules/nativescript-pro-ui/listview/angular/listview-directives.js:462:23: JS ERROR TypeError: rootLocator is not a function. (In ‘rootLocator(viewRef.rootNodes, 0)’, ‘rootLocator’ is undefined)

My app.module.ts looks like this…

import { NgModule } from '@angular/core';

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

import { NativeScriptUIListViewModule } from 'nativescript-pro-ui/listview/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { SocialComponent } from './social/social.component';
import { SharedModule } from './shared';

@NgModule({
  imports: [
    NativeScriptModule,
    AppRoutingModule,
    NativeScriptUIListViewModule,
    SharedModule
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    SocialComponent,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

My social.component.ts looks like this…

import { Component } from '@angular/core';

class DataItem {
    constructor(public id: number, public title: string, public link: string, public slug: string, public icon: string) { }
}

@Component({
    selector: 'social',
    templateUrl: 'modules/social/social.component.html'
})

export class SocialComponent {

    public myItems: Array<DataItem>;

    constructor() {
        this.myItems = [];
        this.myItems.push(new DataItem(0,'Facebook','https://facebook.com','facebook','facebook'));
        this.myItems.push(new DataItem(1,'Twitter','https://twitter.com','twitter','twitter'));
    }

}

And my social.component.html looks like this…

<ActionBar title="Social" class="action-bar"></ActionBar>

<side-drawer-page>
  <GridLayout class="page social-page p-30" rows="*">
    <RadListView [items]="myItems" class="list-group-wrap">
        <ng-template let-item="item" let-i="index" class="list-group">
            <StackLayout orientation="vertical" class="list-group-item">
                <Label class="titleLabel list-group-item-heading" [text]="'Title: ' + item.title"></Label>
                <Label class="linkLabel list-group-item-text" [text]="'Link: ' + item.link"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>
</side-drawer-page>

Does anyone know why I would be receiving this error? I’m sure I have missed an include or something like that, but I’ve checked my files against other working examples and can’t seem to locate what it is that I am missing. I’ve searched online and can’t seem to find anyone else with this issue. Any assistance is greatly appreciated.

Thanks,
Wil


#2

Doing a search for the rootLocator error it looks like it had to do with my version of nativescript-angular. These were recommended versions from the SDK…

Once I upgraded nativescript-angular from 4.0 to 5.0 it all seems to work as expected now.

Wil