NullInjector error- No provider for [[Object object]->[object Object]]

Issue

When a user selects a row within a item a object (contact) is passed to the openContactModal function:

contacts.page.html

<ion-item class="notification-item" lines="none" *ngFor="let contact of haematology">
        <ion-row class="notification-item-wrapper" (click)="openContactModal(contact)">

The Function is executed in contacts.page.ts

openContactModal(contact){
   //OPpen contact modal
   console.log("Open contact modal for contact: " + contact);
   this.modalCtrl.create({
     component: ContactmodalPage,
     componentProps: {contact : contact}
   })
    .then(modal=> {
      modal.present();
      return modal.onDidDismiss();//called when mdoal closed
    })
   
 }

This is the modal contactmodal.page.ts

import { Component, Input, OnInit } from '@angular/core';
import { ModalController, NavParams} from '@ionic/angular';
import { CallNumber } from '@ionic-native/call-number';
import {Plugins } from '@capacitor/core';

const {Browser} = Plugins;


interface Contact {
  //Create a data structure for the conatct passed fomr calling class
  position : '';
  name : '';
  phone : '';
  email : '';
  department : '';
}



@Component({
  selector: 'app-contactmodal',
  templateUrl: './contactmodal.page.html',
  styleUrls: ['./contactmodal.page.scss'],
  //providers: [NavParams]
})


export class ContactmodalPage implements OnInit {

  /**
   * This modal is openend when user taps on a contact 
   * in the Tests list in Contacts.page.ts
   * NavaParmtere var takes data sent (a contact item ) form the calling class ModalControler.create methiod
   * Modal.onDimiss retuns data to calling class (Contact.page..ts) if needed
   * Tutorial https://www.freakyjolly.com/ionic-modal-popovers-pass-receive-data/
   * Alternatively- Input() will receive the data passed form teh calling class- Contact.page.ts  which passes a Test item
   */

   public imagePathway : string;

@Input() contact : Contact;

public data = {
  position : '',
  name : '',
  phone : '',
  email : '',
  department : ''
}

  constructor (private modalcontroller : ModalController,
    private navParams : NavParams,
    private callNumber : CallNumber){}


  ngOnInit() {
    //Assign the contact details 
    this.data = this.contact;
    console.log("contact-modal ngOnIt: got thise fomr contacts page : " + this.data);
    this.getImageName();
  }

  getImageName(){
    //Set image depending on deprtment

    switch (String(this.data.department)){
      case "Haematology": {
        this.imagePathway="../../../assets/tests/tests6.jpg";
        break;
      }
      case "Biochemistry": {
        this.imagePathway="../../../assets/tests/bio3.jpg";
        break;
      }
      case "Microbiology": {
        this.imagePathway = "../../../assets/tests/micro4.jpg";
        break;
      }
      case "Histology" : {
        this.imagePathway = "../../../assets/tests/histology2.jpg";
        break;
      }
      case "Transfusion" : {
        this.imagePathway = "../../../assets/tests/transfusionIcon.jpg";
        break;
      }
      case "Immunology": {
        this.imagePathway = "../../../assets/tests/transfusionIcon.jpg";
        break;
      }
      default: {
        this.imagePathway= "../../../assets/tests/tests6.jpg";
      }

    }
    console.log("test-mpdal.ts: IMage pathway set: " + this.imagePathway);
  }

  async closeModal(){
    //close this modal and pass any data back to contact [age calling class
  const onCloseData : String = "Contact Modal Closed";
  await this.modalcontroller.dismiss(onCloseData);

  }

This is the error thrown:

Error: Uncaught (in promise): NullInjectorError:
R3InjectorError(ContactsPageModule)[[object Object] -> [object Object]
-> [object Object] -> [object Object] -> [object Object]]: NullInject

Ive been searching around for sometime and feel I am getting nowhere.

Any input on what this error means and a possible solution much appreciated.

Update: As requested this is the contact.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ComponentsModule} from '../components/components.module';
import { IonicModule } from '@ionic/angular';
import { ContactsPage } from './contacts.page';
import { RouterModule } from '@angular/router';
import { Contact } from '../modals/contactmodal/contactmodal.page';
import { ContactmodalPageModule} from '../modals/contactmodal/contactmodal.module';


//import { ContactmodalPageModule} from '../modals/contactmodal/contactmodal.module';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    ContactmodalPageModule,
    RouterModule.forChild([{path: '', component: ContactsPage}])
  
  ],
  declarations: [ContactsPage]
})
export class ContactsPageModule {}

Solution

try importing CallNumber from ‘@ionic-native/call-number/ngx’; in contactmodal.page.ts

import { CallNumber } from '@ionic-native/call-number/ngx';

Also, add CallNumber as a provider in the contact.module.ts

 import { CallNumber } from '@ionic-native/call-number/ngx';
...    
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    ContactmodalPageModule,
    RouterModule.forChild([{path: '', component: ContactsPage}])
  
  ],
  declarations: [ContactsPage],
  providers: [CallNumber]
})

Both imported from ‘@ionic-native/call-number/ngx’

Answered By – Alan De Renzis

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0