cannot use ng2-pagination with angular2-webpack-starter

Question

I am using latest ng2-pagination (0.4.1) and angular2-webpack-starter (5.0.5).

My goal is to try ng2-pagination .

I followed the following steps:

• installed ng2-pagination using npm install ng2-pagination --save;
• added import 'ng2-pagination' to vendor.browser.ts ;

• added import {Ng2PaginationModule} from 'ng2-pagination'; to app.module.ts , then added Ng2PaginationModule to its imports array;

• altered detail.component.ts like so:

   import { Component } from '@angular/core'; @Component({ selector: 'detail', template: ` <h1>Hello from Detail</h1> <ul> <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }">{{ item }}</li> </ul> <pagination-controls (pageChange)="p = $event" #api> </pagination-controls>` }) export class Detail { collection = []; constructor() { for (let i = 1; i <= 100; i++) { this.collection.push(`item ${i}`); } } } 

---

I get the following error:

EXCEPTION: Uncaught (in promise): Error: Template parse errors:
The pipe 'paginate' could not be found

It seems to me that the component doesn't know about ng2-paginate: what am I missing?

Answer 1

OK, I fixed it:

The blunder was in the third step; instead of:

• import {Ng2PaginationModule} from 'ng2-pagination'; to app.module.ts , then add Ng2PaginationModule to its imports array;

I should have done the following:

• import {Ng2PaginationModule} from 'ng2-pagination'; to ./+detail/index.ts , then add Ng2PaginationModule to its imports array;

Guess I wasn't familiar enough with latest angular2. Hope this will help someone.