Can't build nativescript angular app using webpack with nativescript-telerik-ui listview


#1

Hi!

I am studying nativescript angular and i am able to run all the tutorials online and build them. Right now I am trying to learn telerik ui listview plugin and I am able to run it in android emulator with no problem however when i try to build it using this command : npm run build-android-bundle, that’s when things go wrong.

this error always comes out

ERROR in Type RadListViewComponent in E:/dev/nativescript_projects/GrabAJob/node_modules/nativescript-telerik-ui/listview/angular/listview-directives.d.ts is part of the declarations of 2 modules: NativeScriptUIListViewModule in E:/dev/nativescript_projects/GrabAJob/node_modules/nativescript-telerik-ui/listview/angular/listview-directives.d.ts and CardListViewModule in E:/dev/nativescript_projects/GrabAJob/app/home/card-listview.module.ts! Please consider moving RadListViewComponent in E:/dev/nativescript_projects/GrabAJob/node_modules/nativescript-telerik-ui/listview/angular/listview-directives.d.ts to a higher module that imports NativeScriptUIListViewModule in E:/dev/nativescript_projects/GrabAJob/node_modules/nativescript-telerik-ui/listview/angular/listview-directives
.d.ts and CardListViewModule in E:/dev/nativescript_projects/GrabAJob/app/home/card-listview.module.ts. You can also create a new NgModule that exports and includes RadListViewComponent in E:/dev/nativescript_projects/GrabAJob/node_modules/nativescript-telerik-ui/listview/angular/listview-directives.d.ts then import that NgModule in NativeScriptUIListViewModule in E:/dev/nativescript_projects/GrabAJob/node_modules/nativescript-telerik-ui/listview/angular/listview-directives.d.ts and CardListViewModule in E:/dev/nativescript_projects/GrabAJob/app/home/card-listview.module.ts.

Here are my specs:
nativescript - 2.5.1
tns-core-modules - 2.5.1
tns-android - 2.5.0
nativescript-telerik-ui - ^1.6.1"

Can you help me solve this problem? thanks a lot!


#2

I just omitted the @ annotation.

here are the codes.

I am implementing lazy loading

import { NgModule, NO_ERRORS_SCHEMA } from “angular/core”;
import { NativeScriptRouterModule } from “nativescript-angular/router”;
import { NativeScriptModule } from “nativescript-angular/nativescript.module”;
import { NativeScriptHttpModule } from “nativescript-angular/http”;
import { CardsListViewComponent } from “./cards-listview.component”;
import { UserService } from “…/services/users/user.service”;

import { LISTVIEW_DIRECTIVES } from “nativescript-telerik-ui/listview/angular”;

export const routerConfig = [
{
path: “”,
component: CardsListViewComponent
}

];

NgModule({
schemas: [NO_ERRORS_SCHEMA],
imports: [
NativeScriptModule,
NativeScriptHttpModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forChild(routerConfig)
],
declarations: [
CardsListViewComponent,
LISTVIEW_DIRECTIVES
],
providers: [UserService]
})
export class CardListViewModule {
constructor() {
console.log(‘CardListViewModule initialized.’);
}
}

Here is my code in my CardsListViewComponent that imports the RadListViewComponent

import {Component, ChangeDetectionStrategy, OnInit,ViewChild} from “angular/core”;
import { ObservableArray } from “data/observable-array”;
import { mockedDataArray } from “./mock-dataItems”;
import { mockedGithubUsers } from “./mock-dataItems”;

import { Page } from “ui/page”;
import { UserService } from “…/services/users/user.service”;
import { View } from “ui/core/view”;

import { ListViewEventData, RadListView } from “nativescript-telerik-ui/listview”;
import {RadListViewComponent} from “nativescript-telerik-ui/listview/angular/listview-directives”;

Component({
moduleId: module.id,
templateUrl: “./cards-listview.component.html”,
styleUrls: ["./cards-listview-common.css"]
})
export class CardsListViewComponent implements OnInit {
private countries: ObservableArray;
private isLoading = false;
private githubUsers : GithubUser[];
private leftItem: View;
private rightItem: View;
private mainView: View;

…other codes here


#3

Hey @ctperez, guess I have the same problem, but didn’t get your solution. You omitted “@” from “@angular/core”? If I do that, it says the module cannot the found.


#4

Actually manage to make i work with this tip :smiley: