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>