No Provider for Virtual Scroll


#1

Hello!
I added the VirtualScroll to the TypeScript file. Now it always crashes with this error:

Error: No provider for VirtualScroll!
at NoProviderError.BaseError [as constructor] (http://localhost:8100/build/main.js:7441:34)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8100/build/main.js:49391:16)
at new NoProviderError (http://localhost:8100/build/main.js:49422:16)
at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:92473:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:92501:25)
at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:92464:25)
at ReflectiveInjector_.get (http://localhost:8100/build/main.js:92273:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/main.js:50106:52)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:8100/build/main.js:93015:45)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:8100/build/main.js:93257:49)

My list:

  <ion-list [virtualScroll]="friends">
  <ion-item *virtualItem="let friend">
    <ion-avatar item-left>
      <!--<ion-img src="{{friend.image}}"></ion-img>-->
      <ion-img src="{{friend.image}}"></ion-img>
    </ion-avatar>
    <h2>{{friend.username}}</h2>
  </ion-item>
</ion-list>

My TypeScript file:

import { NavController, NavParams, MenuController,VirtualScroll} from 'ionic-angular';
...

@Component({
  selector: 'page-friend-list',
  templateUrl: 'friend-list.html'
})
export class FriendListPage {

 friends = [];
constructor(public navCtrl: NavController, public navParams: NavParams,
menuCtrl: MenuController, public http: Http, public af: AngularFire,
list: VirtualScroll) {
menuCtrl.enable(true,"sideMenu");
this.receiveFriends();

}

ionViewDidLoad() {
console.log('ionViewDidLoad FriendListPage');
}

receiveFriends()
{
this.af.auth.getAuth().auth.getToken(true).then(token =>{
  var params = new URLSearchParams();
   params.set("token",token);
  this.http.get("http://192.168.0.103:3000/listFriends",{
    search: params
  }).map(res => res.json())
  .subscribe(res => {
    for(var i=0;i<res.length;i++)
    {
      this.friends.push({"uid":res[i].uid,"username":res[i].username,"image":res[i].pic});
    }
  
    this.list.writeUpdate();
  }, err => {
    console.log(err);
  });
  });
}

}

#2

did you resolve this? I am having the same issue.


#3

hey,

You need not to inject virtualscroll in the constructor parameter.

Inside your class paste the below line:
@ViewChild(VirtualScroll) virtualScroll: VirtualScroll;

Check below code:
export class FriendListPage {

@ViewChild(VirtualScroll) virtualScroll: VirtualScroll;

friends = [];
constructor(public navCtrl: NavController, public navParams: NavParams,
menuCtrl: MenuController, public http: Http, public af: AngularFire) {
menuCtrl.enable(true,“sideMenu”);
this.receiveFriends();

}

Also import following:

import { VirtualScroll } from ‘ionic-angular’;
import { ViewChild } from ‘@angular/core’;