Cannot read property 'SwipeRefreshLayout' of undefined

[alvmarcoux]

I am using Angular Nativescript and the app is giving me the following error when a try to access the template that use this tool:

ERROR Error: Uncaught (in promise): TypeError: Could not load view for: PullToRefresh.TypeError: Cannot read property 'SwipeRefreshLayout' of undefined
 at DebugRenderer2.createElement (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:30492:36)
 at createElement (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/core/bundles/core.umd.js:28524:31)
 at createViewNodes (file:///data/data/org.nativ...
 at ViewUtil.createView (file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/angular/view-util.js:214:44)
 TypeError: Could not load view for: PullToRefresh.TypeError: Cannot read property 'SwipeRefreshLayout' of undefined
 at NativeScriptRenderer.createElement (file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/angular/renderer.js:138:30)
 at Object.getViewClass (file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/angular/element-registry.js:84:15)

in main.ts i have:

import { registerElement } from "nativescript-angular/element-registry";
registerElement("PullToRefresh", () => require("nativescript-pulltorefresh").PullToRefresh);

in the template:

<StackLayout class="page__content">
    <Label class="page__content-icon fas" text="&#xf002;"></Label>
    <PullToRefresh (refresh)="onPull($event)"> 
        <ListView class="list-group" [items]="this.noticias.buscar()" (itemTap)="onItemTap($event)"
            style="height:1250px">
            <ng-template let-x="item">
                <FlexboxLayout flexDirection="row" class="list-group-item">
                    <Image src="res://icon" class="thumb img-circle"></Image>
                    <Label [text]="x" class="list-group-item-heading" verticlaAligment="center"
                        style="width: 60%"></Label>
                </FlexboxLayout>
            </ng-template>
        </ListView>
    </PullToRefresh>
</StackLayout>

and in the component

onPull(e) {        
        console.log(e);        
        const pullRefresh = e.object;        
        setTimeout(() => {            
            // this.resultados.push("xxxxxxx");            
            pullRefresh.refreshing = false;        
        }, 2000); 
    } 

I searched on the web and found this post with what is seems to be the same problem: https://stackoverflow.com/questions/63365237/error-in-nativescript-pulltorefresh-android-cannot-read-property-swiperefres

[bradmartin]

Looks like you might be registering the wrong package

registerElement("PullToRefresh", () => require("nativescript-pulltorefresh").PullToRefresh);

use the @nstudio/... scoped version

[alvmarcoux]

Thanks for the answer. I had already tried that, because i saw it in the "Usage" section. I changed it again, now this is my main.ts:

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { registerElement } from "nativescript-angular/element-registry";
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module";
registerElement("PullToRefresh", () => require("@nstudio/nativescript-pulltorefresh").PullToRefresh);
// registerElement("PullToRefresh", () => require("nativescript-pulltorefresh").PullToRefresh);
platformNativeScriptDynamic().bootstrapModule(AppModule);

the rest of my code is the same, but im still having an error. However i see that is different:

 ERROR Error: Uncaught (in promise): TypeError: Could not load view for: PullToRefresh.TypeError: _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
JS: TypeError: Could not load view for: PullToRefresh.TypeError: _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
JS:     at Object.getViewClass (file: node_modules\@nativescript\angular\element-registry.js:84:0)
JS:     at ViewUtil.push.../node_modules/@nativescript/angular/view-util.js.ViewUtil.createView (file: node_modules\@nativescript\angular\view-util.js:214:0)
JS:     at NativeScriptRenderer.push.../node_modules/@nativescript/angular/renderer.js.NativeScriptRenderer.createElement (file: node_modules\@nativescript\angular\renderer.js:138:0)
JS:     at DebugRenderer2.push.../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.createElement (file: node_modules\@angular\core\fesm5\core.js:30377:0)
JS:     at createElement (file:///data/data/org.nativescript.Mydrawer...