Error: Uncaught (in promise): Error: Export of name 'paginationApi' not found!

[JingCTyagi]

Angular version: 8.2.14

ngx-pagination version: 5.1.1

Description of issue: Got the following error in consol core.js:6014 ERROR Error: Uncaught (in promise): Error: Export of name 'paginationApi' not found! Error: Export of name 'paginationApi' not found! at cacheMatchingLocalNames (core.js:13063) at resolveDirectives (core.js:12836) at ɵɵelementStart (core.js:21516) at PaginationControlsComponent_Template (template.html:2) at executeTemplate (core.js:12178) at checkView (core.js:13616) at componentRefresh (core.js:13360) at refreshChildComponents (core.js:11859) at refreshDescendantViews (core.js:11758) at checkView (core.js:13617) at resolvePromise (zone-evergreen.js:797) at resolvePromise (zone-evergreen.js:754) at zone-evergreen.js:858 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:39688) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:559) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469) at invokeTask (zone-evergreen.js:1603)

Steps to reproduce: whenever add the <pagination-controls id="fraudawareness" (pageChange)="page =($event)">, this error happens.

Expected result: paginations show up Actual result: blank page, and got the error in console

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

Any relevant code:

          <ul class="usa-card-group">
         <li *ngFor="let scheme of fraudawareness | paginate: { id: 'fraudawareness',
                                                      itemsPerPage: 5,
                                                      currentPage: page,
                                                      totalItems: 28}" class="tablet:grid-col-3 usa-card"> 
              <div class="usa-card__container">
              <a href="details" (click)="gotoDetails(scheme.Name)">          
                <header class="usa-card__header">
                  <h2 class="usa-card__heading">{{scheme.Name}}</h2>
                </header>
                </a>
                <div class="usa-card__body">
                  <p>{{replaceLineBreak(scheme.Definition)}}</p>
                </div>
              </div>
            </li>
          </ul>
      <pagination-controls id="fraudawareness" (pageChange)="page =($event)"></pagination-controls>