The pipe 'paginate' could not be found in angular@4.1.3

[tiotama21]

Hi, thanks for contributing!

This project is maintained in my spare time, so in order to help me address your issue as quickly as possible, please provide as much of the following information as you can.

-- Michael

[^ delete this message]

=======

Angular version:4.1.3

ngx-pagination version:

Description of issue:

Steps to reproduce:

Expected result:

Actual result:

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

import { NgModule, ApplicationRef,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule,Http } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateService } from '@ngx-translate/core';
// for credit module
import { CreditCardModule } from './credit-card/credit-card.module';
/*
 * Platform and Environment providers/directives/pipes
 */
import { routing } from './app.routing';

// App is our top level component
import { App } from './app.component';
import { AppState, InternalStateType, AppService } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { FacebookModule } from 'ngx-facebook';
import { Angular2SocialLoginModule } from "angular2-social-login";
import { PagesModule } from './pages/pages.module';
import { FrontendModule } from './pages/frontend/frontend.module';
import { DashboardModule } from './pages/dashboard/dashboard.module';
import { ModuleWithProviders } from '@angular/core';
import { AuthGuard } from './auth.service'
import { WebService } from './services/webservice'
import { MySharedService } from './services/sharedService'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DefaultModal } from './pages/ui/components/modals/default-modal/default-modal.component';
import { OtpModal } from './pages/ui/components/modals/otp-modal/otp-modal.component';
import { phoneNoModal } from './pages/ui/components/modals/phoneNo-modal/phoneNo-modal.component';
import { PropertyDetailsModal } from './pages/ui/components/modals/propertyDetails-modal /propertyDetails-modal.component ';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';

import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module

// import { ToastrModule } from 'ngx-toastr';

// Application wide providers
const APP_PROVIDERS = [
  AppState,
  AppService,
  GlobalState,
  AuthGuard,
  WebService,
  MySharedService,
];
export const firebaseConfig = {
  apiKey: "------redacted-----",
  authDomain: "------redacted-----",
  databaseURL: "------redacted-----",
  projectId: "------redacted-----",
  storageBucket: "",
  messagingSenderId: "------redacted-----"
};

export type StoreType = {
  state: InternalStateType,
  restoreInputValues: () => void,
  disposeOldHosts: () => void
};

export interface AppConfig {
  BASE_URL:string,
  APP_ID:string,
  APP_SECRET:string
}

export const APPCONFIG:AppConfig = {
    BASE_URL: 'your app subdomain',
    APP_ID: 'your app id',
    APP_SECRET: 'your app secret',
};
let providers = {
  "google": {
    "clientId": "------redacted-----"
  },
  "linkedin": {
    "clientId": "------redacted-----",
    "authorize": true,
    // "scope": r_basicprofile, r_emailaddress
  }

};
Angular2SocialLoginModule.loadProvidersScripts(providers);
/**
 * `AppModule` is the main entry point into Angular2's bootstraping process
 */
@NgModule({
  bootstrap: [App],
  declarations: [
    App,
    DefaultModal,
    OtpModal,
    phoneNoModal,
    PropertyDetailsModal,

  ],                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
  entryComponents: [
    DefaultModal,
    OtpModal,
    phoneNoModal,
    PropertyDetailsModal  
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    FacebookModule.forRoot(),
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgaModule.forRoot(),
    NgbModule.forRoot(),
    PagesModule,
    FrontendModule,
    DashboardModule,
    routing,
    CreditCardModule.forRoot(),
    Angular2SocialLoginModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    NgxPaginationModule   

  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    APP_PROVIDERS
  ]
})

export class AppModule {

  constructor(public appState: AppState) {
  }
}

<div class="search-result page">
  <ng-template #headerContainer></ng-template>
  <div class="main-container">
    <div class="filter-bar">
      <div class="container">
        <ul class="form-list">
          <li>
            <input type="search" placeholder="Enter region, city...." name="" id="">
          </li>
          <li>
            <select name="" id="">
              <option value="">Currency</option>
              <option value="">Type A</option>
              <option value="">Type B</option>
              <option value="">Type C</option>
            </select>
          </li>
          <li>
            <select name="" id="">
              <option value="">Min. Price</option>
              <option value="">Type A</option>
              <option value="">Type B</option>
              <option value="">Type C</option>
            </select>
          </li>
          <li>
            <select name="" id="">
              <option value="">Max. Price</option>
              <option value="">Type A</option>
              <option value="">Type B</option>
              <option value="">Type C</option>
            </select>
          </li>
          <li>
            <select name="" id="">
              <option value="">Bedrooms</option>
              <option value="">1</option>
              <option value="">2</option>
              <option value="">3</option>
            </select>
          </li>
          <li>
            <select name="" id="">
              <option value="">Property Type</option>
              <option value="">Type A</option>
              <option value="">Type B</option>
              <option value="">Type C</option>
            </select>
          </li>
          <li>
            <button type="submit" class="button button-darkblue">Search</button>
          </li>
        </ul>
      </div>
    </div>
    <div id="searchresult-main" class="searchresult-main">
      <div class="productlist scroll light">
        <div class="inner">
          <h5>Real Estate <span>7 homes for sale.</span></h5>
          <div class="products">
            <ul>
                <li *ngFor="let listing  of listings | paginate: { itemsPerPage: 5, currentPage: p }">
                    <a  href="javascript:void(0)" (click)="propertyDetails(listing)">
            <div class="block">
              <img src="assets/frontend/images/compactlisting-pic1.jpg" alt="">
              <div class="info">
                <span class="status">House for sale</span>
                <h6><a href="javascript:void(0)">The Chalet Estate</a></h6>

                <p  class="price">{{ listing.listingDetails[0].hoaFeesCurrency.currencyName }} {{ listing.listingDetails[0].hoaFees }}
                   <span>{{listing.listingDetails[0].baths}}baths 
                   {{listing.listingDetails[0].bedrooms}}beds
                   {{listing.listingDetails[0].floorSpace}}sqft
                  </span>
                  </p>
                  <p>{{listing.listingAddress}}</p>
              </div>
              <a href="javascript:void(0)" class="like">Like</a>
            </div>
        </a>
      </li>

          <!-- <div class="block">
              <img src="assets/frontend/images/compactlisting-pic2.jpg" alt="">
              <div class="info">
                <span class="status">House for sale</span>
                <h6><a href="javascript:void(0)">The Chalet Estate</a></h6>
                <p>KT89B Hampton Court, England, United Kingdom</p>
                <p class="price">$81,300 <span>3.03 ac lot</span></p>
              </div>
              <a href="javascript:void(0)" class="like">Like</a>
            </div>
            <div class="block">
              <img src="assets/frontend/images/compactlisting-pic1.jpg" alt="">
              <div class="info">
                <span class="status">House for sale</span>
                <h6><a href="javascript:void(0)">The Chalet Estate</a></h6>
                <p>KT89B Hampton Court, England, United Kingdom</p>
                <p class="price">$81,300 <span>3.03 ac lot</span></p>
              </div>
              <a href="javascript:void(0)" class="like">Like</a>
            </div>
            <div class="block">
              <img src="assets/frontend/images/compactlisting-pic2.jpg" alt="">
              <div class="info">
                <span class="status">House for sale</span>
                <h6><a href="javascript:void(0)">The Chalet Estate</a></h6>
                <p>KT89B Hampton Court, England, United Kingdom</p>
                <p class="price">$81,300 <span>3.03 ac lot</span></p>
              </div>
              <a href="javascript:void(0)" class="like">Like</a>
            </div>
            <div class="block">
              <img src="assets/frontend/images/compactlisting-pic1.jpg" alt="">
              <div class="info">
                <span class="status">House for sale</span>
                <h6><a href="javascript:void(0)">The Chalet Estate</a></h6>
                <p>KT89B Hampton Court, England, United Kingdom</p>
                <p class="price">$81,300 <span>3.03 ac lot</span></p>
              </div>
              <a href="javascript:void(0)" class="like">Like</a>
            </div>
            <div class="block">
              <img src="assets/frontend/images/compactlisting-pic2.jpg" alt="">
              <div class="info">
                <span class="status">House for sale</span>
                <h6><a href="javascript:void(0)">The Chalet Estate</a></h6>
                <p>KT89B Hampton Court, England, United Kingdom</p>
                <p class="price">$81,300 <span>3.03 ac lot</span></p>
              </div>
              <a href="javascript:void(0)" class="like">Like</a>
            </div>
            <div class="block">
              <img src="assets/frontend/images/compactlisting-pic1.jpg" alt="">
              <div class="info">
                <span class="status">House for sale</span>
                <h6><a href="javascript:void(0)">The Chalet Estate</a></h6>
                <p>KT89B Hampton Court, England, United Kingdom</p>
                <p class="price">$81,300 <span>3.03 ac lot</span></p>
              </div>
              <a href="javascript:void(0)" class="like">Like</a>
            </div>
            <div class="block">
              <img src="assets/frontend/images/compactlisting-pic2.jpg" alt="">
              <div class="info">
                <span class="status">House for sale</span>
                <h6><a href="javascript:void(0)">The Chalet Estate</a></h6>
                <p>KT89B Hampton Court, England, United Kingdom</p>
                <p class="price">$81,300 <span>3.03 ac lot</span></p>
              </div>
              <a href="javascript:void(0)" class="like">Like</a>
            </div> -->
          </ul>
          <pagination-controls (pageChange)="p = $event"></pagination-controls>

          </div>
        </div>
      </div>
      <div class="details tabs">
        <a href="javascript:void(0)" id="moreless" class="moreless">More Map</a>
        <div class="topbar">
          <ul>
            <li><a href="#tabs-1">Map</a></li>
            <li><a href="#tabs-2">Chart</a></li>
            <li><a href="#tabs-3">Benefits</a></li>
            <li><a href="#tabs-4">Value</a></li>
            <li><a href="#tabs-5">Favorites</a></li>
          </ul>
        </div>
        <div class="content">
          <div id="tabs-1">
            <iframe width="712" height="712" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?zoom=11&center=41.3851%2C2.1734&key=AIzaSyBpJLE_DrLaj_gXAiczRi-0f9tUi3_OHIs" allowfullscreen></iframe>
          </div>
          <div id="tabs-2">
            <h2>Chart</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid rerum cupiditate, dignissimos iste praesentium voluptate numquam dolorem architecto vitae aperiam, fuga incidunt consequatur accusamus, dicta eveniet natus possimus iusto deleniti.</p>
          </div>
          <div id="tabs-3">
            <h2>Benefits</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, sint nobis eaque maiores, repellat modi magnam! Eius, aperiam quam vel eligendi mollitia, ipsa molestias, quisquam voluptas odio natus ullam ducimus.</p>
          </div>
          <div id="tabs-4">
            <h2>Value</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque optio, labore voluptates, sunt ipsam possimus placeat illo sapiente perspiciatis laborum tempore consectetur eaque doloremque praesentium, porro libero perferendis vel culpa!</p>
          </div>
          <div id="tabs-5">
            <h2>Favorites</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis laudantium totam, minus quibusdam aspernatur ex consequatur sapiente atque illo iusto tempora molestias quidem est quaerat animi perspiciatis molestiae saepe, voluptatibus.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ng-template #footerContainer></ng-template>
</div>

[michaelbromley]

Hi,

The error message means that the pipe is not available in the component in which you are using it. If this component is in a feature module, then you need to make sure you import the Ng2PaginationModule into that feature module.

Now, some general tips on GitHub issues, since it looks like you might be new to this:

1) It is good that you included code, but you included a bit too much! It is hard for me to find the relevant bits when there is so much code to read. 2) You can make GitHub format and highlight your code by using the special markdown for code - you start the block with three backticks followed by the language, e.g. ```TypeScript, and then end the block with three back ticks again. I took the liberty of editing your issue to enable code formatting. See https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown. 3) You pasted your actual API keys for Firebase etc into this issue. I removed them for you now, but they have been publicly available now on the internet for a few days, so you should consider them insecure and change them.

Okay, hope all of that is helpful. Let me know if you fix it.

[AbdurRehman91]

Hi.I am facing the same issue.I have also imported the Ng2PaginationModule module into the component in which i am using the pagination but still the error is showing up.My angular version is 4.4.6.

thanks

[AbdurRehman91]

Kindly do comment on this as soon as possible.

thanks

[michaelbromley]

Closing this since there was no follow up from the original poster. @AbdurRehman91 see my answer to your separate issue.