title: Angular 7: NullInjectorError: No provider for PagerService
body: <p>I am trying to implement pagination but It's not working. Here is my code:</p>
  
  <p><strong>pager.service.ts:</strong></p>
  
  <pre><code>  import * as _ from 'underscore';
    @Injectable({
        providedIn: 'root',
    })
  export class PagerService {
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
  
      // calculate total pages
      let totalPages = Math.ceil(totalItems / pageSize);
  
      let startPage: number, endPage: number;
      if (totalPages &lt;= 10) {
        // less than 10 total pages so show all
        startPage = 1;
        endPage = totalPages;
      } else {
        // more than 10 total pages so calculate start and end pages
        if (currentPage &lt;= 6) {
          startPage = 1;
          endPage = 10;
        } else if (currentPage + 4 &gt;= totalPages) {
          startPage = totalPages - 9;
          endPage = totalPages;
        } else {
          startPage = currentPage - 5;
          endPage = currentPage + 4;
        }
      }
  
      // calculate start and end item indexes
      let startIndex = (currentPage - 1) * pageSize;
      let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
  
      // create an array of pages to ng-repeat in the pager control
      let pages = _.range(startPage, endPage + 1);
  
      // return object with all pager properties required by the view
      return {
        totalItems: totalItems,
        currentPage: currentPage,
        pageSize: pageSize,
        totalPages: totalPages,
        startPage: startPage,
        endPage: endPage,
        startIndex: startIndex,
        endIndex: endIndex,
        pages: pages
      };
    }
  }
  </code></pre>
  
  <p><strong>quick-worker-list.component.ts:</strong></p>
  
  <pre><code>import { JobService } from '@app/services';
  import { PagerService } from './../../../services/pager.service';
  import { Component, OnInit, Input } from '@angular/core';
  
  import * as _ from 'underscore';
  
  @Component({
    selector: 'app-quick-worker-list',
    templateUrl: './quick-worker-list.component.html',
    styles: []
  })
  export class QuickWorkerListComponent implements OnInit {
    S3ImageUrl: string;
  
    // array of all items to be paged
    private workerData: any[];
  
    // pager object
    pager: any = {};
  
    // paged items
    pagedItems: any[];
  
  
    constructor(private pagerService: PagerService, private jobService: JobService) {
    }
  
    ngOnInit() {
      this.jobService.getQuickJobWorkerList(1301, 1)
        .map((response: Response) =&gt; response.json())
        .subscribe(data =&gt; {
          // set items to json response
          this.workerData = data;
  
          // initialize to page 1
          this.setPage(1);
        });
    }
  
    setPage(page: number) {
      if (page &lt; 1 || page &gt; this.pager.totalPages) {
        return;
      }
  
      // get pager object from service
      this.pager = this.pagerService.getPager(this.allItems.length, page);
  
      // get current page of items
      this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
    }
  }
  </code></pre>
  
  <p>I get this error:</p>
  
  <blockquote>
    <p>QuickWorkerListComponent_Host.ngfactory.js? [sm]:1 ERROR Error:
    StaticInjectorError(AppModule)[QuickWorkerListComponent ->
    PagerService]:    StaticInjectorError(Platform:
    core)[QuickWorkerListComponent -> PagerService]: 
        NullInjectorError: No provider for PagerService!
        at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get
    (core.js:3228)
        at resolveToken (core.js:3473)
        at tryResolveToken (core.js:3417)
        at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get
    (core.js:3314)
        at resolveToken (core.js:3473)
        at tryResolveToken (core.js:3417)
        at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get
    (core.js:3314)
        at resolveNgModuleDep (core.js:19784)
        at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get
    (core.js:20473)
        at resolveNgModuleDep (core.js:19784)</p>
  </blockquote>