CODEWITHSUNDEEP
twitter-bootstrapangularjasminekarma-jasmineng2-bootstrap
Human Being
Human Being

Reputation: 8387

Angular2 - Pagination error

I installed ng2-bootstrap as pagination component. I found the help from (https://valor-software.com/ng2-bootstrap/#/pagination#pager-component) setting up the component easily.

Pagination also works fine as expected.

But I am facing problem with running the existing test case. While I try to run older test cases, I am getting so many test cases because of the newly included pagination code in the **component.html" .

<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
    [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"></pagination>

These are the few errors that I am getting while I tried to run the test cases.

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            <pagination [ERROR ->][totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow""): SearchResultComponent@84:24
Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("ol-md-6 col-lg-6"  class="pageButton">
            <pagination [totalItems]="totalNumberOfRecords" [ERROR ->][(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
            "): SearchResultComponent@84:60
Can't bind to 'maxSize' since it isn't a known property of 'pagination'. ("tton">
            <pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [ERROR ->][maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [boundaryLinks]="true" ["): SearchResultComponent@84:92
Can't bind to 'boundaryLinks' since it isn't a known property of 'pagination'. (")]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [ERROR ->][boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfI"): SearchResultComponent@85:20
Can't bind to 'rotate' since it isn't a known property of 'pagination'. ("[maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [boundaryLinks]="true" [ERROR ->][rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)"): SearchResultComponent@85:43
Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("m"
                    [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [ERROR ->][itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"></pagination>
       "): SearchResultComponent@85:96
'pagination' is not a known element:
1. If 'pagination' is an Angular component, then verify that it is part of this module.
2. If 'pagination' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            [ERROR ->]<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
No provider for NgControl ("></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            [ERROR ->]<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
Error: Template parse errors:
Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            <pagination [ERROR ->][totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow""): SearchResultComponent@84:24
Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("ol-md-6 col-lg-6"  class="pageButton">
            <pagination [totalItems]="totalNumberOfRecords" [ERROR ->][(ngModel)]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
            "): SearchResultComponent@84:60
Can't bind to 'maxSize' since it isn't a known property of 'pagination'. ("tton">
            <pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [ERROR ->][maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [boundaryLinks]="true" ["): SearchResultComponent@84:92
Can't bind to 'boundaryLinks' since it isn't a known property of 'pagination'. (")]="currentPageNumber" [maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [ERROR ->][boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfI"): SearchResultComponent@85:20
Can't bind to 'rotate' since it isn't a known property of 'pagination'. ("[maxSize]="numberOfButtonsToShow" class="pagination-sm"
                    [boundaryLinks]="true" [ERROR ->][rotate]="false" (pageChanged)="pageChanged($event)" [itemsPerPage]="numberOfItemsPerPage" (numPages)"): SearchResultComponent@85:43
Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("m"
                    [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" [ERROR ->][itemsPerPage]="numberOfItemsPerPage" (numPages)="totalNumberOfPages = $event"></pagination>
       "): SearchResultComponent@85:96
'pagination' is not a known element:
1. If 'pagination' is an Angular component, then verify that it is part of this module.
2. If 'pagination' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            [ERROR ->]<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
No provider for NgControl ("></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"  class="pageButton">
            [ERROR ->]<pagination [totalItems]="totalNumberOfRecords" [(ngModel)]="currentPageNumber" [maxSize]="numberOfBu"): SearchResultComponent@84:12
    at SyntaxError.ZoneAwareError (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:2043:33)
    at SyntaxError.BaseError [as constructor] (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:64958:16)
    at new SyntaxError (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:5443:16)
    at TemplateParser.parse (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:17883:19)
    at JitCompiler._compileTemplate (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48480:68)
    at http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48363:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48363:19)
    at createResult (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:48265:19)
    at ZoneDelegate.470.ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1415:26)
    at AsyncTestZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79182:39)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79874:39)
    at ZoneDelegate.470.ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1414:32)
    at Zone.470.Zone.run (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1211:43)
    at http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1764:57
    at resolvePromise (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1728:31) [ProxyZone]
    at resolvePromise (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1704:17) [ProxyZone]
    at http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1764:17 [ProxyZone]
    at ProxyZoneSpec.onInvokeTask (http://localhost:9876/base/src/test.ts?064cb70427ca5b910f9a6b38441f4814b1f3c15d:79901:39) [ProxyZone]
    at ZoneDelegate.470.ZoneDelegate.invokeTask (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1447:36) [ProxyZone]
    at Zone.470.Zone.runTask (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1251:47) [<root> => ProxyZone]
    at drainMicroTaskQueue (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1614:35) [<root>]
    at ZoneTask.invoke (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:1505:25) [<root>]
    at data.args.(anonymous function) (http://localhost:9876/base/src/polyfills.ts?0a9ca230b4630dbd5dca0d237827921c6470f2c7:2612:25) [<root>]

For simplicity I have not include the other error coming from the pagination html tag. It causes error from all its attributes inside the pagination tag.

Please help me to solve this issue.

Upvotes: 2

Views: 964

Answers (2)

rohit.b
rohit.b

Reputation: 35

if you have added pagination module into your test bed and in NgModule, just check if the component is part of the same NgModule as it seems as a different component Please share your NgModule with the app tree structure

Please check your systemjs, you might have missed to mention the file for ng2-bootstrap

Upvotes: 0

valorkin
valorkin

Reputation: 1339

Don't forget to import pagination module into your test bed configuration, it will solve an issue

Upvotes: 0

Related Questions