Error: Template parse errors: There is no directive with "exportAs" set to "paginationApi"

Angular 2 version: 2.4.5 ng2-pagination version: 2.0.0 Description of issue: Getting an error in the console which is preventing my app from loading:

main.browser.ts:25
SyntaxError
_nativeError
:
Error: Template parse errors: There is no directive with "exportAs" set to "paginationApi" (" <pagination-template [ERROR ->]#p="paginationApi" [id]="id" [maxSize]="maxSize" "): PaginationControlsComponent@1:26 Can't bind to 'maxSize' since it isn't a known property of 'pagination-template'. 1. If 'pagination-template' is an Angular component and it has 'maxSize' input, then verify that it is part of this module. 2. If 'pagination-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("pagination-template #p="paginationApi" [id]="id" [ERROR ->][maxSize]="maxSize" (pageChange)="pageChange.emit($event)"> <ul class="n"): PaginationControlsComponent@3:25 at SyntaxError.BaseError [as constructor] (http://localhost:3000/vendor.dll.js:70873:27) [<root>] at new SyntaxError (http://localhost:3000/vendor.dll.js:6256:16) [<root>] at TemplateParser.parse (http://localhost:3000/vendor.dll.js:19415:19) [<root>] at JitCompiler._compileTemplate (http://localhost:3000/vendor.dll.js:51921:68) [<root>] at http://localhost:3000/vendor.dll.js:51804:62 [<root>] at Set.forEach (native) [<root>] at JitCompiler._compileComponents (http://localhost:3000/vendor.dll.js:51804:19) [<root>] at createResult (http://localhost:3000/vendor.dll.js:51687:19) [<root>] at Zone.run (http://localhost:3000/polyfills.dll.js:4100:43) [<root> => <root>] at http://localhost:3000/polyfills.dll.js:4507:57 [<root>] at Zone.runTask (http://localhost:3000/polyfills.dll.js:4138:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:3000/polyfills.dll.js:4405:35) [<root>] at HTMLDocument.ZoneTask.invoke (http://localhost:3000/polyfills.dll.js:4336:25

Steps to reproduce: I’m using webpack, specifically https://github.com/AngularClass/angular2-webpack-starter. I npm install ng2-pagination and import { PaginationService } from 'ng2-pagination'; in my app.module. I register PaginationService as a provider in app.module.

In shared.module…

//imports
...
import { PaginatePipe } from 'ng2-pagination';

// Components
...
import { PaginationControlsComponent } from 'ng2-pagination';
...


@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
    PaginationControlsComponent,
    ...
  ],
  exports: [
    ...
    PaginatePipe,
    ...
  ],
})
export class SharedModule { }

In a component I am using import { PaginatePipe } from 'ng2-pagination'; and import { PaginationInstance } from 'ng2-pagination';

Expected result: App should load and I should not receive an error in the console.

Actual result:

Receive an error in the console.

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

Any relevant code: In my component ts…

paginationConfig: PaginationInstance = {
    itemsPerPage: this.config.pagination.defaultItemsPerPage,
    currentPage: 1
 };

In my template…

<pagination-controls #p (pageChange)="onPageChange($event)">
        <pagination-template [p]="p"></pagination-template>
        <form class="inline">
          <per-page [paginationConfig]="paginationConfig" class="control"></per-page>
          <go-to-page [p]="p" class="control"></go-to-page>
        </form>
</pagination-controls>

[alainvd]

To get rid of this error, just rename your component to pagination-template as the directive is being applied to this component.

[RichaPandey02]

I am getting the same error what is the solution?