Angular 9 Module which has issue jsPDF (installed types + packages itself)
When doing ng serve it works When doing ng build --prod , it has errors
ERROR in src/app/xxx/xxxx.componentomponent.ts:52:27 - error TS2351: This expression is not constructable.
Type 'typeof jsPDF' has no construct signatures.
52 let pdf = new jsPDF('p', 'mm', 'a4');
~~~~~
src/app/xxx/xxxx.component.ts:7:1
7 import * as jsPDF from 'jspdf';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.
tsconfig file has "esModuleInterop": true,
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"esModuleInterop": true,
"importHelpers": true,
"target": "es2015",
"allowSyntheticDefaultImports":true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
I import the module like this :
**import * as jsPDF from 'jspdf';**
Use it like this inside my class :
generatePDF() {
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
var imgWidth = 208;
var imgHeight = canvas.height * imgWidth / canvas.width;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = **new jsPDF**('p', 'mm', 'a4');
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('skill-set.pdf');
});
}
I also tried to add the module js files in scripts section of angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
**"node_modules/jspdf/dist/jspdf.min.js"**
]
(tested in angular 10, so I guess this fix is for newer angular versions)
instead of this :
import * as jsPDF from 'jspdf';
write this :
import jspdf from 'jspdf';
[Watch out ! both jspdf
in 2nd line are in small letter]
then your
let pdf = new jsPDF('p', 'mm', 'a4');
would work too, just change all to small letter (you must import in small letter like my 2nd import line before doing this)
let pdf = new jspdf('p', 'mm', 'a4');