Angular 7: NullInjectorError: No provider for PagerService
Solution 1
Following the error text, you have to import and add your PagerService
in the Provider part of your app.module.ts
file:
providers: [
PagerService,
],
And don't forget to declare it as Injectable
:
@Injectable()
export class PagerService {
// ...
}
Solution 2
Your error is related to PagerService
, not with the underscore
NullInjectorError: No provider for PagerService! at
make sure your service is registered in list of providers at app.module or has the Injectable
declaration at top:
@Injectable({
providedIn: 'root',
})
a common example of service in angular 7 is below:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyService{
constructor() { }
}
please refer to documentation for Services for more details.
Solution 3
Page Service or Job Service both should have Injectable attribute applied or check if you are injecting something in these services also then same applies to that also.
Related videos on Youtube
Comments
-
veben almost 2 years
I am trying to implement pagination but It's not working. Here is my code:
pager.service.ts:
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 <= 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 <= 6) { startPage = 1; endPage = 10; } else if (currentPage + 4 >= 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 }; } }
quick-worker-list.component.ts:
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) => response.json()) .subscribe(data => { // set items to json response this.workerData = data; // initialize to page 1 this.setPage(1); }); } setPage(page: number) { if (page < 1 || page > 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); } }
I get this error:
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)
-
shruti almost 4 yearsThanks for this document reference ,,, you saved my day :)
-
nircraft almost 4 yearsHappy to help @shruti