Error -"The pipe 'paginate' could not be found"

Hi, thanks for contributing!

This project is maintained in my spare time, so in order to help me address your issue as quickly as possible, please provide as much of the following information as you can.

– Michael

[^ delete this message]

=======

Angular version:

ngx-pagination version:

Description of issue:

Steps to reproduce:

Expected result:

Actual result:

Demo: (if possible, edit this StackBlitz demo and paste the link to your fork)

Any relevant code:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'paginate' could not be found ("
      <th>Year</th>
    </thead>   
      <tr *ngFor="l[ERROR ->]et i of data  | paginate: { itemsPerPage: 5, currentPage: p };" >
      <td>{{i.code}}</td>
      <td"): ng:///ProceduresModule/PrcedureListComponent.html@28:19
'pagination-controls' is not a known element:
1. If 'pagination-controls' is an Angular component, then verify that it is part of this module.
2. If 'pagination-controls' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </table> 
  <!-- <pagination-controls (pageChange)="p = $event"></pagination-controls> -->
  [ERROR ->]<pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>  </div>
  <!-- <ng-pag"): ng:///ProceduresModule/PrcedureListComponent.html@35:2
Error: Template parse errors:
The pipe 'paginate' could not be found ("
      <th>Year</th>
    </thead>   
      <tr *ngFor="l[ERROR ->]et i of data  | paginate: { itemsPerPage: 5, currentPage: p };" >
      <td>{{i.code}}</td>
      <td"): ng:///ProceduresModule/PrcedureListComponent.html@28:19
'pagination-controls' is not a known element:
1. If 'pagination-controls' is an Angular component, then verify that it is part of this module.
2. If 'pagination-controls' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </table> 
  <!-- <pagination-controls (pageChange)="p = $event"></pagination-controls> -->
  [ERROR ->]<pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>  </div>
  <!-- <ng-pag"): ng:///ProceduresModule/PrcedureListComponent.html@35:2
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
defaultErrorLogger @ core.js:1448
ErrorHandler.handleError @ core.js:1509
next @ core.js:5497
schedulerFn @ core.js:4331
SafeSubscriber.__tryOrUnsub @ Subscriber.js:240
SafeSubscriber.next @ Subscriber.js:187
Subscriber._next @ Subscriber.js:128
Subscriber.next @ Subscriber.js:92
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4311
(anonymous) @ core.js:4771
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4697
onHandleError @ core.js:4771
ZoneDelegate.handleError @ zone.js:392
Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:684
api.microtaskDrainDone @ zone.js:693
drainMicroTaskQueue @ zone.js:602
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:297
ZoneDelegate.scheduleTask @ zone.js:401
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:856
resolvePromise @ zone.js:803
(anonymous) @ zone.js:728
webpackJsonpCallback @ inline.bundle.js:22
(anonymous) @ common.chunk.js:1

---

My cod is app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import {HttpModule} from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { FormsModule } from '@angular/forms';
//import { DataTableModule1 } from 'primeng/primeng'; // Here
import { CommonModule } from '@angular/common';
import { DataTableModule} from 'angular-datatable'
//import {NgxPaginationModule} from 'ngx-pagination'; 
//import { DataTableModule }   from '../../modules/datatable.module';
//import { DataTableModule } from 'angular-4-data-table-fix';
//import { NgxDatatableModule } from '@swimlane/ngx-datatable';
//import { Ng2TableModule } from 'ng2-table/ng2-table';
//import { PaginationModule } from 'ngx-pagination-bootstrap'
import {NgxPaginationModule} from 'ngx-pagination'; 
import { PagerService } from './_services/index';
//import { PaginationModule  } from 'ng2-bootstrap/components/pagination';

@NgModule({
  declarations: [
    AppComponent
   
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    HttpClientModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),
    FormsModule,
    CommonModule,
    NgxPaginationModule,
    PaginationModule
   // PaginationModule,
    //DataTableModule,
   // NgxDatatableModule,
 
  ],
  providers: [
    PagerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

procedurelist.component.ts

import { Component, OnInit } from '@angular/core';
import {Http,Response} from '@angular/http';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { DataTableResource } from 'angular-4-data-table-fix';
//import * as Dialogs from "ui/dialogs";
//import * as XmlObjects from "nativescript-xmlobjects";
//import "rxjs/Rx";
import * as $ from 'jquery';
import * as _ from 'underscore';
import {NgxPaginationModule} from 'ngx-pagination';
import { PagerService } from './_services/index'


@Component({
  selector: 'app-prcedure-list',
  templateUrl: './prcedure-list.component.html',
  styleUrls: ['./prcedure-list.component.css']
})
export class PrcedureListComponent implements OnInit {
  constructor(private http: Http) { }

  // array of all items to be paged
  private allItems: any[];

  // pager object
  pager: any = {};

  // paged items
  pagedItems: any[];
 code: any = "";
private apiurl='https://address-book-demo.herokuapp.com/api/contacts';
data:any={};

ngOnInit() {
  // get dummy data
  this.http.get('http://localhost:53589/api/values/GetAllProc').subscribe(data => {
    console.log(data);
    this.data=data;
    console.log(3);
    console.log(this.data);

     // set items to json response
     this.data = data;

     // initialize to page 1
    // this.setPage(1);
  });
}

//   setPage(page: number) {
//     if (page < 1 || page > this.pager.totalPages) {
//         return;
//     }

//     // get pager object from service
//     this.pager = this.pagerService.getPager(this.allItems.length, page);

//     // get current page of items
//     this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
// }
 

  getSearchDetails(){
    
  let sval=$("#txtSearch").val();
    this.http.get('http://localhost:53589/api/values/GetPRocCode?id=' + sval).subscribe(data => {
      console.log(data);
        this.data=data;
       
      });
  }
//sorting
key: string = 'name'; //set default
reverse: boolean = false;
sort(key){
  this.key = key;
  this.reverse = !this.reverse;
}

//initializing p to one
p: number = 1;
pageChanged(event){console.log("pageChanged")}
}

---

My procedurelist.component.html

<div>
  <table class="table table-bordered table-inverse" id="sampleApp" >
    <thead>
      <th>code</th>
      <th>Description</th>
      <th>Year</th>
    </thead>   
      <tr *ngFor="let i of data  | paginate: { itemsPerPage: 5, currentPage: p };" >
      <td>{{i.code}}</td>
      <td>{{i.Description}}</td>
      <td>{{i.Year}}</td>
    </tr>
  </table> 

[KiranVaghela]

Put NgxPaginationModule after FormsModule this work for me

@NgModule({ imports: [ BrowserModule, FormsModule, NgxPaginationModule ],

Works for me, Thanks

[mcpierce]

I seem to have solved my own problem. I added this module to app.module.ts rather than to comic.module.ts. When I moved it there it began to work correctly.