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?

Answer 1

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

Answer 2

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 {}

Answer 3

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.

Answer 4

1. 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 ],

2. Recompile your project and it will work fine