adding ngb-pagination will not load the page - html

Question

The documentation on ngb-pagination in https://ng-bootstrap.github.io/#/components/pagination/overview causes the page to not load after adding this
<ngb-pagination
[(page)]="page"
[pageSize]="pageSize"
[collectionSize]="items.length"></ngb-pagination>
Here is my HTML file
<div class="body d-flex ">
<table class="table table-hover ">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Email</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | slice: (page-1) * pageSize : page * pageSize">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.email}}</td>
<td>action</td>
</tr>
</tbody>
</table>
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="users.length"></ngb-pagination>
</div>
Here is the ts file
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { environment } from 'src/environments/environment';
#Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
readonly API_PATH = '/user/all';
users: any[] = [];
page = 1;
pageSize = 5;
constructor(private api: HttpClient) {}
async ngOnInit() {
this.displayAllUsers();
}
private async displayAllUsers() {
var users: any = await this.getUsers();
this.getResult(users);
}
private async getUsers(): Promise<any> {
return await this.api.get(environment.API_URL + this.API_PATH).toPromise();
}
private getResult(result: any) {
if (result.success) {
this.users = this.toArray(result.data);
} else {
console.log(result.data);
}
}
private toArray(result: any): any[] {
var list = [];
for (var items in result) {
list.push(result[items]);
}
return list;
}
}
if I remove ngb-pagination snippet the page seems to load perfectly fine, but adding the snippet will fail to load the page

Answer 1

Add the #angular/localize package to your packages.json:
npm install #angular/localize --save
Add this to your polyfills.ts:
import '#angular/localize/init';
This worked for me, when I was having the same problem after upgrading from Angular 6 to 12 and ng-bootstrap 10.