2

So, unfortunately I need to embed a Hubspot form in my Angular app. This is done by including an external script and running some Javascript code to create a form on the page.

The following script needs to be included:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

And then you can run hbspt.forms.create() to create the form. Not very interesting, right.

But what is interesting, is that this code doesn't work when using it in an Angular app. I've prepared a Stackblitz for an Angular project, and a project without a framework. Both have the above code in the index.html:

Angular: https://stackblitz.com/edit/angular-bdsz3h
No framework: https://stackblitz.com/edit/typescript-ld9ypn

Now, if you open up your console on the pages and enter hbspt.forms.create(), in Angular it will result in undefined. The framework-less project however, works as expected and shows that it is a function. What's happening here and how can I get it to work in Angular?

Pharetra
  • 302
  • 4
  • 17

1 Answers1

2

See line 32 of HubSpot Forms V2 Debug.js For some reason (didn't look too far into) they loop through and set all listed properties (lines 21/23) to undefined. One of these being window.Promise.

Then when zone.evergreen.js picks up on the activity, specifically this bit of code, it throws a Cannot read property 'prototype' of undefined, as NewNativePromise would be window.Promise, which is now set to undefined.

I've only seen this when loading the script dynamically. When placing the script as you've shown in the index.html, everything seems to run fine. Might be winning a race-condition however...

Tried a few things like running it in it's own Zone.fork and ngZone.runOutsideAngular, but never figured it out.

Charly
  • 881
  • 10
  • 19