html2pdf.js working in some angular projects and not working in some. I want to use html2pdf.js for adding page breaks while generating pdf. I am declaring it like below import * as html2pdf from 'html2pdf.js'; It is working for one project with the below package.json { "name": "footytrivia-ui", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~9.1.6", "@angular/common": "~9.1.6", "@angular/compiler": "~9.1.6", "@angular/core": "~9.1.6", "@angular/forms": "~9.1.6", "@angular/platform-browser": "~9.1.6", "@angular/platform-browser-dynamic": "~9.1.6", "@angular/router": "~9.1.6", "@ngrx/effects": "^10.0.0", "@ngrx/schematics": "^10.0.0", "@ngrx/store": "^10.0.0", "@ngrx/store-devtools": "^10.0.0", "angularx-social-login": "^2.3.1", "angularx-social-login-ivy": "^1.2.9", "bootstrap": "^4.5.0", "html2canvas": "^1.1.4", "html2pdf.js": "^0.9.3", "jspdf": "^2.3.1", "ngx-bootstrap": "^5.6.1", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.5", "@angular/cli": "~9.1.5", "@angular/compiler-cli": "~9.1.6", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~3.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~5.4.3", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.8.3" } } And not working for the below package.json { "name": "demo-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "~12.0.3", "@angular/cdk": "^12.0.3", "@angular/common": "~12.0.3", "@angular/compiler": "~12.0.3", "@angular/core": "~12.0.3", "@angular/flex-layout": "*", "@angular/forms": "~12.0.3", "@angular/material": "^12.0.3", "@angular/platform-browser": "~12.0.3", "@angular/platform-browser-dynamic": "~12.0.3", "@angular/router": "~12.0.3", "@swimlane/ngx-charts": "^18.0.1", "bootstrap": "^5.0.1", "chart.js": "^2.9.3", "html2pdf.js": "^0.9.3", "jspdf": "^2.3.1", "ng2-charts": "^2.2.3", "ngx-bootstrap": "^6.2.0", "ngx-toastr": "^14.0.0", "rxjs": "~6.6.0", "tslib": "^2.1.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.0.3", "@angular/cli": "~12.0.3", "@angular/compiler-cli": "~12.0.3", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "jasmine-core": "~3.7.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "typescript": "~4.2.3" } } The message says error TS7016: Could not find a declaration file for module 'html2pdf.js'. Edit ------------ tsconfig.json for Working solution { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } } tsconfig.json for non working solution. /* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "es2017", "module": "es2020", "lib": [ "es2018", "dom" ], "resolveJsonModule": true }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } } RESOLVED: I did not import it the html2pdf.js. <script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.min.js"></script> This script was already present in the index.html. I just declared the variable in the component. declare var html2pdf: any; Worked for me. Continue reading...
