NullInjectorError: No provider for ChangeDetectorRef

Question

Using Angular 5, I am firing a function, select() from one component only for selection that triggers another function, getqr() in another component for printing. getqr() fires a web request for items that are selected from the first component. In order to update the print view to reflect the request, I am using ChangeDetectorRef. Doing this gives me an error of:

StaticInjectorError(AppModule)[PrintComponent -> ChangeDetectorRef]: StaticInjectorError(Platform: core)[PrintComponent -> ChangeDetectorRef]: NullInjectorError: No provider for ChangeDetectorRef!

I'm not sure what the issue is here as I cannot (and should not have to) add ChangeDetectorRef to providers in app.module.ts.

Here is the TS for the selection component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PrintComponent } from './print/print.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  docs;

  constructor(public http: HttpClient, public print: PrintComponent) { }

  ngOnInit() {
    this.http.get("https://portal.oldnational.com/corporate/portalsupport/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=DocumentGroup,Title").subscribe(data => {
      this.docs = data['value'];
    });
  }

  select(ID, selected){
    if (selected == true) {
      this.print.selecteddocs.push(ID); //Adds selection to array on Print Component
    }
    else {
      var index = this.print.selecteddocs.indexOf(ID);
      this.print.selecteddocs.splice(index, 1); //Removes selection from array on Print Component
    }
    this.print.getqr(); //fires getqr() from Print Component
  }

}

Here is the TS for the print component:

import { Component, OnInit, ChangeDetectorRef} from '@angular/core';
.....

@Component({
  selector: 'app-print',
  templateUrl: './print.component.html',
  styleUrls: ['./print.component.css'],
})
export class PrintComponent implements OnInit {
  barcodeitems;
  selecteddocs = [];

  constructor(public http: HttpClient, private cdr: ChangeDetectorRef){
  }

  ngOnInit(): void {
  }

  getqr() {
    console.log("selecteddocs array", this.selecteddocs);
    let filterQuery = this.selecteddocs.map(i => `ID eq '${i}'`).join(" or ");
    let url = `https://portal.oldnational.com/corporate/portalsupport/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=ID&$filter=${filterQuery}`
    this.http.get(url).subscribe(data => {
      console.log("data.value", data['value']); //Correctly logs results
      this.barcodeitems = data['value'];
      this.cdr.detectChanges(); //Attempt to refresh the view
    });
  }

}

What can I do to fix this issue or update the view of the Print Component after a selection is made?

Answer 1

In my case i was calling changeDetectorRef: ChangeDetectorRef from a service.

it works fine. once changeDetectorRef: ChangeDetectorRef moved from service to a component.

Do not import ChangeDetectorRef into services