Embedded forms not displaying

[drazafsky]

I have the following code in an Angular 4 application.

let ie_comment_start = this.renderer.createComment('[if lte IE 8]');
let ie_script = this.renderer.createElement('script');
ie_script.type = 'text/javascript';
ie_script.charset = "utf-8";
ie_script.onload = (ev: Event) => {
	let current_script = this.renderer.createElement('script');
        current_script.type = 'text/javascript';
        current_script.charset = "utf-8";
        current_script.onload = (ev2: Event) => {
        	console.log('loaded');
                let form_script = this.renderer.createElement('script');
                form_script.type = 'text/javascript';
                form_script.text = `
                	setTimeout(function() {
                        	console.log('start hbspt.forms.create');
                                hbspt.forms.create({
                                	portalId: "${this.data.hubspot_portal_id}",
                                      	formId: "${this.data.hubspot_form_id}",
                                      	target: "#hubspotform"
				});
                                console.log('end hbspt.forms.create');
                        }, 10000);
                `;
                this.renderer.appendChild(hubspotform, form_script);
	};
        current_script.src = '//js.hsforms.net/forms/v2.js';
        this.renderer.appendChild(hubspotform, current_script);
};
ie_script.src = '//js.hsforms.net/forms/v2-legacy.js';

let ie_comment_end = this.renderer.createComment('[endif]');
this.renderer.appendChild(hubspotform, ie_comment_start);
this.renderer.appendChild(hubspotform, ie_script);
this.renderer.appendChild(hubspotform, ie_comment_end);

The code runs, the portal id and form id are using correct values, v2-legacy.js and v2.js are both loaded. However the form is not displayed anywhere on the page and I receive the following error in the developer console.

ERROR TypeError: "hbspt.forms.create is not a function"

Has anyone experienced anything similar?

[Rupali]

Hi @drazafsky 

Did you find the solution? I am facing the same issue. When I load page first time it shows me in console

TypeError: hbspt.forms.create is not a function.

But second time it started to work and form appear.

[drazafsky]

That was my initial thought which is why the call to hbspt.forms.create is in the onload of the v2.js which isn't added until the onload of the v2-legacy.js. Even added a 10second timeout after v2.js loads before calling hbspt.forms.create just to be safe. Didn't change anything unfortunately.

[Manobyte]

Does the form load on the page when you use static values in the embed code? Like if you have just copied it right from the hubspot form creator? The only thing I can think of is that maybe your v2-legacy.js and v2.js are being loaded after your form creation and not being seen?