Error: The pipe 'paginate' could not be found! with Ngx-pagination in Angular 11

Question

I am using angular 11 and trying to implement pagination

HTML

 <tbody>
              <tr *ngFor="let order of orders | paginate: config;let i = index">
                <th scope="row" style="display:none;">{{ i + 1 }}</th>
                <td>{{ order.Code }}</td>
                <td>{{ order.quantity }}</td>
              </tr>
           </tbody>
          </table>
          <pagination-controls id="basicPaginate" (pageChange)="pageChanged($event)"></pagination-controls>

app.module.ts

.....

import { NgxPaginationModule } from 'ngx-pagination';


  imports: [
    .......
    RouterModule.forRoot(AppRoutes,{
      useHash: true
    }),
    .......
    NgxPaginationModule
    
  ]

Orders component

export class OrderComponent implements OnInit {

orders : Order [] = [];
config:any;


  constructor(private orderService : OrderService {
    this.config = {
      id: 'basicPaginate',
      itemsPerPage: 5,
      currentPage: 1,
      totalItems: 50
    };
  }
ngOnInit(){
//web service ok
    this.orderService.getAllOrders(30,5,0).pipe(first()).subscribe(orders => this.orders = orders);

  }


  
  pageChanged(event) {
    this.config.currentPage = event;
  }


}

The project compiles ok

So why is this error occuring ? I want only the basic pagination and not the custom one. Is there a compatibility issue with Angular 11 ?

if you are using it in a lazy loaded module you need to import the `NgxPaginationModule` in that module instead of the app module — Benzara Tahar, Jan 18 '21 at 17:07

score 3 · Answer 1 · edited Sep 03 '21 at 08:34

3

Go to your OrderComponent imported Module file yourModuleName.module.ts and add the following code

import { NgxPaginationModule } from 'ngx-pagination'; // At the top of your module
.
.
.
@NgModule({
  imports: [
    CommonModule,
    NgxPaginationModule // Add this line of code here
  ],

Recompile your project and it will work fine

edited Sep 03 '21 at 08:34

LW001

2,452
6
27
36

answered Sep 02 '21 at 14:11

Bushra Mustofa

1,075
7
12

score 1 · Answer 2 · answered Jul 16 '21 at 19:43

If I were you I would check if you have properly imported the NgxPagination module to the module in which you are using it, if you imported it into a module make sure the module you're using is importing the module you're using. For example:

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxPaginationModule } from 'ngx-pagination'; //Imports NgxPaginationModule 

@NgModule({
  declarations: [],
  imports: [CommonModule, NgxPaginationModule ],
  exports: [CommonModule, NgxPaginationModule], // Exports NgxPaginationModule 
})
export class SharedModule {}

in order to use it in the following module you must import the SharedModule as expressed in line 7(the line with the comment)

product-feature.module.ts

import { NgModule } from '@angular/core';
import { ProductComponent } from '../product/product.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [ProductComponent],
  imports: [SharedModule], //must import SharedModule
  exports: [ProductComponent],
})
export class ProductsFeatureModule {}

score 0 · Answer 3 · answered Apr 06 '21 at 12:21

I hope you found the solution to your problem. This problem happened to me just now and I fixed it by importing NgxPaginationModule at the very top of the imports array. After that, reserve the project. It will probably work. If it doesn't, just uninstall and reinstall ngx pagination.

this is an image to show the position of the module in the imports array in my project

score 0 · Answer 4 · answered Aug 06 '21 at 11:18

0

This seems to be a VS Code (assuming you use that) glitch. Just restart your IDE and try again.

PS: If your OrderComponent resides in a different module, then you need NgxPaginationModule in that module's imports section as well.

answered Aug 06 '21 at 11:18

Ε Г И І И О

11,199
1
48
63

Error: The pipe 'paginate' could not be found! with Ngx-pagination in Angular 11

4 Answers4