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.

Jgascona · Accepted Answer · 2020-02-21T09:03:40.653

38

Solved! Thank you :)

Finally I imported in that way:

import html2canvas from 'html2canvas';

edited Feb 21 '20 at 09:03

answered Jul 10 '19 at 09:04

Jgascona

1,201
2
13
25

2

Worked like charm, Thanks a lot bro! – Kedar Km Feb 19 '21 at 12:17

score 7 · Answer 2 · answered Jul 09 '19 at 17:56

7

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.

answered Jul 09 '19 at 17:56

eCamK

273
1
6
13

score 1 · Answer 3 · answered Jul 24 '19 at 03:46

1

Had the same issue on Angular 8 and the only way I was able to import the library without errors was using require.

See this post.

answered Jul 24 '19 at 03:46

velval

3,072
36
45

As I said, for me now it's working with "import html2canvas from 'html2canvas';" – Jgascona Jul 24 '19 at 08:40
yup I know @Jgascona,Just giving another option for other people having the same issue that may come across this SO as your solution did not wok for me. – velval Jul 25 '19 at 03:52
Thanks for that @velval, hope some of the answer could be usefull for someone – Jgascona Jul 25 '19 at 07:09
This is the only way I managed to solve it. I'm running on Angular `8.2.14` and html2canvas `1.0.0-rc.5` – Daniel Grima Jan 06 '20 at 09:50

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

3 Answers3