Error : No providers for Component

Question

I have a directive where I defined a radio button and I want to call a method of a component .. Whene I inject the component in constructor I got this error : ERROR Error: No provider for FoldersComponent!

directive.ts

   import { FoldersComponent } from '../folders/folders.component';
import { Directive, ElementRef, HostListener, Input, AfterViewInit, ViewChild, EventEmitter, Output } from '@angular/core';

declare var jQuery: any;

@Directive({
  selector: '[icheck]'
})

export class IcheckDirective implements AfterViewInit {

  @Output('icheck')
  callComponentFunction: EventEmitter<any> = new EventEmitter<any>();
  constructor(private el: ElementRef, private parentCmp: FoldersComponent) {
    jQuery(this.el.nativeElement).iCheck({
      checkboxClass: 'icheckbox_square-aero',
      radioClass: 'iradio_square-aero'
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {
        this.parentCmp.selectType();
      }
    });
  }

  ngAfterViewInit(): void {
  }
}

folder.component.ts

@Component({
  selector: 'app-folders',
  templateUrl: './folders.component.html',
  styleUrls: ['./folders.component.css'],
})
export class FoldersComponent implements OnInit {
   constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {  }

  selectType() {
    //    alert();
    console.log("Ici");
  }
}

folder.component.html

<input type="radio" icheck name="filters.type" [(ngModel)]="filters.type"                   value="IN"> (IN)

My @NgModule

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    FoldersComponent,
  ],

Conceit

It should work plnkr.co/edit/ecPrqOp4nDIG71vo4ksT?p=preview – Merras

So cool ... thx ..; I don't understant in my code when I remove parameters of my constructor private parentCmp: FoldersComponent, it is work but when I add it for using method of component I got error .. very funny .. – Conceit

Thxxx so much It is work – Conceit

@Merras Could you explain us how did you fix ? – Smoking

Answer 1

I was facing the same issue. Turns out I had missed updating the following in my code:

1. @Injectable({ providedIn: 'root' }) in the .ts file of the component that you want to import.

2. Add the component in the NgModule of your appModule.

Crosslegged

Answer 2

It seems you have missed to register FoldersComponent to @NgModule({})

Can you post your main file where you have used NgModule

Windsor

Answer 3

try this, you have not imported your component.

import {  FoldersComponent  } from '../path/to/component
constructor(private _foldersComponent : FoldersComponent){}
@Directive({
selector: '[icheck]'

})
 ... rest of file 

Then to call methods from FoldersComponent just use _foldersComponent.

For example, this._foldersComponent.someMethod()

Canyon

You shouldn't provide component in providers array if you want to have existing reference to component – Merras