Angular2 - Supplied parameters do not match any signature of call target

Question

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'image-display',
  templateUrl: './image-display.component.html'
})
export class ImageDisplayComponent implements OnChanges {
  @Input() image: File;
  @Input() imagePath?: string;

  private fileReader: FileReader;

  constructor() { }

  ngOnChanges() {
    if (this.image && this.fileReader) {
      this.fileReader.readAsDataURL(this.image);
    }
  }
}

On compiling this with AOT getting below error:

PRINHYLTPAP0592:matata ajays$ ng build --prod --aot
/myApp/src/$$_gendir/app/image-uploader/image-display/image-display.component.ngfactory.ts (61,9): 
Supplied parameters do not match any signature of call target.

Answer 1

AOT forces you to inform every single mandatory parameter for every method call.

In your example, the method ngOnChanges() should actually be ngOnChanges(changes: SimpleChanges).

Answer 2

please provide code of image-display.component.html file. it might be the variable on the template is not initialized onto the component. Check all the variables you used on the template if they are exists on ImageDisplayComponent.

Answer 3

If there is any mismatch between method which is called from html, and the definition of the method in the component, we see this error.

mostly mismatch in the number of parameters passed to the method while calling.

I was passing $event in onModelChange method, which is not decalared in the method definition.

dropdownChanged(){
  console.log("dropdown changed");
}
dropdownChangedActual(evnt:any){
  console.log("dropdown changed");
}

<select [(ngModel)]="myModel" (ngModelChange)="dropdownChanged($event)">
     <option>.............</option>
</select>

Either declare $event or any parameters we pass or Pass the parameters as mentioned in method definition.