Why am I obtaining this error in my Angular application? Uncaught (in promise): NullInjectorError

Question

I am not so into Angular and PrimeNG and I am finding the following problem trying to replicate this PrimeNG table showcase example (the code is provided into the "Source" tab of this page): https://www.primefaces.org/primeng/showcase/#/table

Basically I am try to put this code into a component of my application (then I will adatp it to my use cases).

So I have this component class:

import { Component, OnInit, ViewChild } from '@angular/core';
import { Customer, Representative } from './customer';
import { Table } from 'primeng';
import { CustomerService } from './customerservice';

@Component({
  selector: 'app-gestione-ordini',
  templateUrl: './gestione-ordini.component.html',
  styleUrls: ['./gestione-ordini.component.css']
})
export class GestioneOrdiniComponent implements OnInit {

  customers: Customer[];

  selectedCustomers: Customer[];

  representatives: Representative[];

  statuses: any[];

  loading: boolean = true;

  @ViewChild('dt') table: Table;

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    this.customerService.getCustomersLarge().then(customers => {
        this.customers = customers;
        this.loading = false;
    });

    this.representatives = [
        {name: "Amy Elsner", image: 'amyelsner.png'},
        {name: "Anna Fali", image: 'annafali.png'},
        {name: "Asiya Javayant", image: 'asiyajavayant.png'},
        {name: "Bernardo Dominic", image: 'bernardodominic.png'},
        {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
        {name: "Ioni Bowcher", image: 'ionibowcher.png'},
        {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
        {name: "Onyama Limba", image: 'onyamalimba.png'},
        {name: "Stephen Shaw", image: 'stephenshaw.png'},
        {name: "XuXue Feng", image: 'xuxuefeng.png'}
    ];

    this.statuses = [
        {label: 'Unqualified', value: 'unqualified'},
        {label: 'Qualified', value: 'qualified'},
        {label: 'New', value: 'new'},
        {label: 'Negotiation', value: 'negotiation'},
        {label: 'Renewal', value: 'renewal'},
        {label: 'Proposal', value: 'proposal'}
    ]
  }

  onActivityChange(event) {
    const value = event.target.value;
    if (value && value.trim().length) {
        const activity = parseInt(value);

        if (!isNaN(activity)) {
            this.table.filter(activity, 'activity', 'gte');
        }
    }
  }

  onDateSelect(value) {
      this.table.filter(this.formatDate(value), 'date', 'equals')
  }

  formatDate(date) {
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (month < 10) {
          month = '0' + month;
      }

      if (day > 10) {
          day = '0' + day;
      }

      return date.getFullYear() + '-' + month + '-' + day;
  }

  onRepresentativeChange(event) {
      this.table.filter(event.value, 'representative', 'in')
  }


}

Then this is the CustomerService service used in the previous component class:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Customer } from './customer';


@Injectable()
export class CustomerService {

    constructor(private http: HttpClient) { }

    getCustomersSmall() {
        return this.http.get('assets/showcase/data/customers-small.json')
            .toPromise()
            .then(res => res.data)
            .then(data => { return data; });
    }

    getCustomersMedium() {
        return this.http.get('assets/showcase/data/customers-medium.json')
            .toPromise()
            .then(res => res.data)
            .then(data => { return data; });
    }

    getCustomersLarge() {
        return this.http.get('assets/showcase/data/customers-large.json')
            .toPromise()
            .then(res => res.data)
            .then(data => { return data; });
    }

    getCustomersXLarge() {
        return this.http.get('assets/showcase/data/customers-xlarge.json')
            .toPromise()
            .then(res => res.data)
            .then(data => { return data; });
    }

}

And this is the related html view page for this component:


  
      
          
              List of Cars
              
                  
                  
              
          
      
      
          
              
              Name 
              Country 
              Representative 
              Date 
              Status 
              Activity 
              
          
          
              
                  
              
              
                  
              
              
                  
              
              
                  
                      
                          
                              
                              {{option.label}}
                          
                      
                  
              
              
                  
              
              
                  
                      
                          {{option.label}}
                      
                  
              
              
                  
              
              
          
      
      
          
              
                  
              
              
                  Name
                  {{customer.name}}
              
              
                  Country
                  
                  {{customer.country.name}}
              
              
                  Representative
                  
                  {{customer.representative.name}}
              
              
                  Date
                  {{customer.date}}
              
              
                  Status
                  {{customer.status}}
              
              
                  Activity
                  
              
              
                  
              
          
      
      
          
              No customers found.

It compile correctly but the problem is that when I run my application instead obtain the expected table I am obtaining this error message:

core.js:6228 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[CustomerService -> CustomerService -> CustomerService]: 
  NullInjectorError: No provider for CustomerService!
NullInjectorError: R3InjectorError(AppModule)[CustomerService -> CustomerService -> CustomerService]: 
  NullInjectorError: No provider for CustomerService!
    at NullInjector.get (core.js:1085)
    at R3Injector.get (core.js:16955)
    at R3Injector.get (core.js:16955)
    at R3Injector.get (core.js:16955)
    at NgModuleRef$1.get (core.js:36329)
    at Object.get (core.js:33972)
    at getOrCreateInjectable (core.js:5848)
    at Module.ɵɵdirectiveInject (core.js:21103)
    at NodeInjectorFactory.GestioneOrdiniComponent_Factory [as factory] (gestione-ordini.component.ts:11)
    at getNodeInjectable (core.js:5993)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41632)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

Why am I obtaining this error? What could be the problem?

Michael · Accepted Answer

Try adding

@Injectable({provided in: "root"})

To your service class. This will include it in the root injector and make it available to any entity in your application.

Alternatively if you only want this service available to part of your application you need to include it in a NgModule in the provides array

Why am I obtaining this error in my Angular application? Uncaught (in promise): NullInjectorError

Answers (1)

Related Questions