Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If Angular throws html2canvas_1.default is not a function, the generated bundle is calling a .default export that is not callable at runtime. This is an import/export-shape mismatch, usually exposed by a change in Angular CLI, TypeScript, the module format, or the installed html2canvas version. Match your import to the package shape, rebuild the application, and only then investigate browser, CORS, or rendering limitations.
Use the import that matches your installed package
Start by checking the exact html2canvas version in package.json and your lockfile. Also record the Angular CLI and TypeScript versions. The same source line can produce a different runtime shape after an upgrade because the bundler’s CommonJS/ES module interop changes.
CommonJS-style or older compiler interop
For a package build that exposes the callable value through the module namespace, use a namespace import:
import * as html2canvas from 'html2canvas';
export class CaptureComponent {
capture(element: HTMLElement): void {
html2canvas(element).then(canvas => {
document.body.appendChild(canvas);
});
}
}This form binds the module object produced by the compiler. It works when that object itself is callable in the generated bundle, which is how older CommonJS-oriented integrations were commonly consumed.
#1 Best Overall
True default export
If your installed version exposes a real default export and your compiler is configured to interoperate with it, use:
import html2canvas from 'html2canvas';
export class CaptureComponent {
capture(element: HTMLElement): void {
html2canvas(element).then(canvas => {
document.body.appendChild(canvas);
});
}
}Do not combine the two forms, cast the value to any, or add .default manually just to silence an error. A namespace import and a default import are different bindings: a namespace is an object whose exports are properties, while a default import is the module’s default export. The runtime error means the binding selected by the bundle is not a function.
What the call is supposed to do
html2canvas(element[, options]) runs in the browser. It reads the target DOM node and the styles applied to it, reconstructs that appearance, and returns a Promise resolving to a <canvas> element. A minimal Angular example is:
import html2canvas from 'html2canvas'; // or the namespace form above, not both
async captureCard(): Promise<void> {
const element = this.card.nativeElement as HTMLElement;
const canvas = await html2canvas(element);
const image = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = image;
link.download = 'card.png';
link.click();
}Use @ViewChild only after the view exists:
import { AfterViewInit, ElementRef, ViewChild } from '@angular/core';
export class CardComponent implements AfterViewInit {
@ViewChild('card') card!: ElementRef<HTMLElement>;
ngAfterViewInit(): void {
// The element now exists; attach a button handler or capture later.
}
}<section #card>Content to capture</section>
<button type="button" (click)="captureCard()">Save PNG</button>Waiting for the view matters independently of the import. Calling the library before Angular has created the element produces a missing-target problem, not the _1.default error.
Rank #2
A repeatable Angular diagnosis
- Confirm one installed copy. Search
package.jsonand the lockfile forhtml2canvas. Remove accidental duplicate or stale entries, then run your package manager’s install command to make the lockfile authoritative. - Record versions. Note the Angular CLI, Angular framework, TypeScript, bundler, and
html2canvasversions. This makes an upgrade regression reproducible instead of guessing at an import. - Inspect the compiler settings. Check
tsconfig.jsonand any application-specific override foresModuleInterop,allowSyntheticDefaultImports, and the module/target settings. These options affect how a default import is emitted; they do not turn every namespace object into a function. - Switch one import shape. If the error names
html2canvas_1.default, remove the default import and try the namespace form shown above when your installed build is CommonJS-style. If TypeScript then reports “This expression is not callable,” stop forcing it: use the package’s supported default export with compatible interop settings instead. - Restart the development server. Stop
ng serveand start it again after changing imports. A hot-reload session can retain an old transformed module. - Test in a browser-only path. Trigger the method from a rendered component or a browser event, not from a server-side rendering pass, build step, or Node process.
Choosing between namespace and default imports
| Question | Namespace import | Default import |
|---|---|---|
| Source form | import * as html2canvas from 'html2canvas' |
import html2canvas from 'html2canvas' |
| Binding received | Module namespace object | Module’s default export |
| Best fit | CommonJS-style or older compiler interop | Package/build with a true default export and compatible TypeScript settings |
| Typical failure | TypeScript says the namespace is not callable | Runtime says html2canvas_1.default is not a function |
| What to change | Use the package’s supported callable shape; do not cast blindly | Verify interop and the emitted module before retaining it |
The table describes the two possible shapes, not a promise that every release supports both. The installed package and emitted bundle are the authority for your application.
Why an Angular upgrade can expose the error
The maintainer issue describing this exact exception appeared after an Angular CLI upgrade. An upgrade can alter TypeScript defaults, bundler transforms, optimization, or how CommonJS packages are wrapped. Your application code may be unchanged while the generated call changes from a callable module value to a .default property.
Compare the last working lockfile and configuration with the failing build. Pay particular attention to a changed html2canvas release, Angular CLI major version, TypeScript version, or module/interop flag. Revert one variable at a time or pin the known-good package while you choose the import supported by the new toolchain.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Browser and rendering limits after the import is fixed
It is not a Node.js screenshot engine
html2canvas is heavily dependent on browser APIs and is not suitable for Node.js. Do not call it in Angular Universal or another server-side rendering path. Guard browser-only code with Angular’s platform checks, and invoke it from a client lifecycle or user event after hydration and view creation.
Cross-origin images and fonts
The renderer reads the page from the browser’s security context. Images, fonts, canvases, or other resources served from another origin can be omitted or taint the canvas unless the server supplies appropriate CORS headers and the capture is configured accordingly. A proxy that brings the resource to the same origin may be required. This is a separate problem from module loading: a successful function call does not guarantee that every external asset will appear.
DOM reconstruction is not a native browser screenshot
The library reconstructs pixels from DOM and CSS rather than asking the browser for a native tab image. Unsupported or unusual CSS, animations, web fonts that have not finished loading, lazy content, and dynamic state can therefore differ from what you see on screen. Wait for the target state, pause animations if necessary, and test the exact browser that your users run.
Common symptoms and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
html2canvas_1.default is not a function |
Default binding is not callable in the emitted bundle | Check version and interop; try the supported namespace import, then restart the build |
| “This expression is not callable” on the namespace import | TypeScript sees a namespace object | Use the package’s true default export with compatible compiler settings; do not use any as a workaround |
Target is null or undefined |
Capture runs before the Angular view exists | Capture after AfterViewInit, hydration, or a user action; verify the selector/reference |
| Works locally, fails in SSR | Browser API called on the server | Move the call into a browser-only branch or client component |
| Images or fonts are missing | Cross-origin policy, late loading, or unsupported CSS | Fix CORS/proxy setup, await asset readiness, and simplify or test the affected styles |
| Changes appear ignored after editing imports | Old development bundle or cache | Stop and restart the Angular dev server; clear the relevant build cache if needed |
When you need a clean webpage screenshot instead
For a browser-independent capture of a public URL, ScreenshotNeo avoids Angular’s module and DOM-runtime setup. It accepts a URL and returns PNG, JPEG, WebP, or PDF. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.
Or skip the browser setup
Use the API documented at https://screenshotneo.com/docs/:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. It supports full-page and element captures, 12 device presets plus custom viewports, retina scale, dark mode, PDF controls, custom CSS and JavaScript, clicks, waits, blocked requests, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous webhooks, bulk capture for up to 100 URLs per call, a usage API, and an OpenAPI specification. Its parameter names also accept those used by other screenshot APIs, which can simplify migration.
Rank #4
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan. Sign up free for ScreenshotNeo.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.FAQ
Is this a canvas drawing failure?
No. The exception occurs before rendering: the generated code selected a non-callable export. Canvas, CORS, and CSS issues happen after a successful function call.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Can I fix it by writing html2canvas.default(...)?
Usually not. That hard-codes an export shape instead of matching the package and compiler output. Correct the import and rebuild.
Should I use a proxy for every capture?
No. A proxy is relevant when cross-origin resources cannot be served with usable CORS headers. Same-origin pages do not need one solely because this error appeared.
Will changing imports make the result identical to a browser screenshot?
No. Import correction only makes the function callable. DOM/CSS support, loading order, browser security, and external assets still determine the pixels.
Frequently Asked Questions
Is this a canvas drawing failure?
No. The exception occurs before rendering: the generated code selected a non-callable export. Canvas, CORS, and CSS issues happen after a successful function call.
Recommended Free Tools
Can I fix it by writing html2canvas.default(…)?
Usually not. That hard-codes an export shape instead of matching the package and compiler output. Correct the import and rebuild.
Should I use a proxy for every capture?
No. A proxy is relevant when cross-origin resources cannot be served with usable CORS headers. Same-origin pages do not need one solely because this error appeared.
Will changing imports make the result identical to a browser screenshot?
No. Import correction only makes the function callable. DOM/CSS support, loading order, browser security, and external assets still determine the pixels.
The Bottom Line
Match the import to the installed html2canvas export and Angular/TypeScript interop, restart the build, and run it only after the browser view exists. Then treat CORS, SSR, loading, and CSS fidelity as separate rendering concerns.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
