在Angular应用中嵌入Typeform报TypeError，如何解决？

Let's break down how to fix this error you're seeing when trying to embed a Typeform in your Angular component. This issue almost always boils down to how you're passing the DOM element to the Typeform SDK, or a small mismatch in initialization steps.

Step 1: Pass the Native DOM Element to makeWidget #

The most common culprit here is that you're passing the Angular ElementRef object directly to makeWidget, but the Typeform SDK expects a raw DOM element instead.

In your ngAfterViewInit method, adjust the first argument of makeWidget:

ngAfterViewInit() {
  if (this.embedElement) {
    console.log(this.embedElement);
    typeformEmbed.makeWidget(
      this.embedElement.nativeElement, // ✅ Use the actual DOM node instead of ElementRef
      'https://xxx.typeform.com/to/xxx',
      {
        hideHeaders: true,
        hideFooter: true,
        opacity: 75,
        buttonText: 'Take the survey!',
        onSubmit: () => {
          console.log('Typeform successfully submitted');
        }
      }
    );
  }
}

Angular's ElementRef is just a wrapper around the DOM element—you need to access its nativeElement property to get the node the Typeform SDK can interact with.

Step 2: Verify SDK Installation & Import #

Double-check that you've installed the Typeform Embed SDK correctly:

npm install @typeform/embed --save

Or if using Yarn:

yarn add @typeform/embed

You can also optimize the import by pulling in only the method you need, which helps with tree-shaking:

import { makeWidget } from '@typeform/embed';

Then use it directly without the typeformEmbed. prefix:

makeWidget(this.embedElement.nativeElement, 'https://xxx.typeform.com/to/xxx', { /* your options */ });

Step 3: Handle Edge Cases with DOM Timing #

If you're using conditional rendering for the component (like *ngIf), the DOM element might not be fully ready even in ngAfterViewInit. As a last resort, wrap the initialization in a short timeout to give Angular extra time to render the element:

ngAfterViewInit() {
  if (this.embedElement) {
    setTimeout(() => {
      typeformEmbed.makeWidget(
        this.embedElement.nativeElement,
        'https://xxx.typeform.com/to/xxx',
        { /* your options */ }
      );
    }, 100);
  }
}

Step 4: Update to the Latest SDK Version #

If the above steps don't resolve the issue, it could be a bug in an older version of the SDK. Update to the latest release:

npm update @typeform/embed

Newer versions often fix framework-specific edge cases for Angular integrations.

内容的提问来源于stack exchange，提问作者Marek Kucharski