html2canvas in Angular - Cannot invoke an expression whose type lacks a call signature

Question

I am trying to use the html2canvas library into an Angular 8 project.

I also tried to install the html2canvas types in my project by npm install --save @types/html2canvas but it stills not working.

Template:

<div #myform>
  <form>
    ...
  </form>
</div>

Component:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as html2canvas from 'html2canvas';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.scss']
})
export class PdfViewerComponent {
  @ViewChild('myform', { static: false, read: ElementRef }) pdfForm: ElementRef;

  constructor() {}


  pdfDownload() {
    html2canvas(this.pdfForm.nativeElement).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      document.body.appendChild(canvas);
    });
  }

}

My intention is to render the form as canvas, but the application throws the error:

ERROR in src/app/grid/pdf-viewer/pdf-viewer.component.ts (19,5): error TS2349: Can not invoke an expression whose type lacks a call signature. Type 'typeof import ("myroute")' you have not supported call signatures.

Answer 1

Solved! Thank you :)

Finally I imported in that way:

import html2canvas from 'html2canvas';

Answer 2

For Angular 8, see this link: https://github.com/niklasvh/html2canvas/issues/1896#issuecomment-506129710

Basically, you need to have version 1.0.0-rc.1 of html2canvas installed for it to work.