Angular 17 and ng-bootstrap,ngb-pagination problem

Question

I'm working on an Angular project using Angular version 17, and I'm using ngb-pagination. However, ngb-pagination is causing several errors.

The example provided by ng-bootstrap is for a standalone component, but I'm not using a standalone component.

Below, I will provide you with my code and the errors I'm encountering.

component.html :

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">time</th>
            <th scope="col">date</th>
            <th scope="col">req no</th>
            <th scope="col">status</th>
        </tr>
    </thead>
    <tbody>
        @for (req of myProductRequestsList; track req.productRequestId;let i = $index) {
            <tr>
                <th scope="row">{{ i }}</th>
                <td>{{req.requestTime}}</td>
                <td>{{req.requestDate}}</td>
                <td>{{req.productRequestId}}</td>
                <td>{{req.status}}</td>
            </tr>
        }
    </tbody>
</table>

<div class="d-flex justify-content-between p-2">
    <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" (pageChange)="refreshCountries()">
    </ngb-pagination>

    <select class="form-select" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="refreshCountries()">
        <option [ngValue]="10">2 items per page</option>
        <option [ngValue]="25">4 items per page</option>
        <option [ngValue]="50">6 items per page</option>
    </select>
</div>

and component.ts :

import { Component, OnInit } from '@angular/core';
import { MyProductRequestsListInterface } from '../../../../_models/product/ProductRequest/my-product-requests-list-interface';
import { MyProductRequestsListService } from '../../../../_services/product/ProductRequest/my-product-requests-list.service';

@Component({
  selector: 'app-my-product-requests-list',
  templateUrl: './my-product-requests-list.component.html',
  styleUrl: './my-product-requests-list.component.css'
})
export class MyProductRequestsListComponent implements OnInit {
  page = 1;
    pageSize = 10;
  myProductRequestsList:MyProductRequestsListInterface[]=[];
  collectionSize:number = this.myProductRequestsList.length;
  
  constructor(private _MyProductRequestsList:MyProductRequestsListService){}
  
  ngOnInit(): void {
    this.getMyProductRequestsList();
  }
  
  getMyProductRequestsList(){
    this._MyProductRequestsList.getMyProductsRequestsList(1,10).subscribe({
      next:(v:any)=>this.myProductRequestsList=v.result
    });
  }

  refreshCountries(){}
}

and the errors:

'ngb-pagination' is not a known element:
1. If 'ngb-pagination' is an Angular component, then verify that it is part of this module.
2. If 'ngb-pagination' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component

to suppress this message.ngtsc(-998001) my-product-requests-list.component.ts(15, 22): Error occurs in the template of component MyProductRequestsListComponent. Can't bind to 'collectionSize' since it isn't a known property of 'ngb-pagination'. 1. If 'ngb-pagination' is an Angular component and it has 'collectionSize' input, then verify that it is part of this module. 2. If 'ngb-pagination' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.ngtsc(-998002) my-product-requests-list.component.ts(15, 22): Error occurs in the template of component MyProductRequestsListComponent.

and:

Can't bind to 'ngModel' since it isn't a known property of 'select'.
Can't bind to 'ngValue' since it isn't a known property of 'option'

need help. thank u all

Answer 1

I have finally found the solution and I'm posting it here for those who may encounter this problem or a similar issue in the future.

In addition to the issue with ngb-pagination in this component, I faced an error when trying to use routerLink within this component, stating that routerLink isn't a known property.

After extensive searching and not finding a solution, I came to the conclusion that I should delete the component and recreate it.

So, I deleted the component and removed the relevant imports from the app.module and app-routing.module files, and then recreated the component.

The problem was resolved.

Just that simple.