Angularjs integration

rbu...@nfbconsulting.com

unread,

May 1, 2018, 5:11:42 PM5/1/18

to Blockly

Hey there! I'm trying to integrate blockly into an AngularJS application and I'm running into all kinds of errors surrounding the closure/goog library. I found a library blockly-angular and still have the same issue. Does anyone have experience integrating this into an AngularJS application? Specifically we're using AngularJS with browserify. When I try to require the necessary files I get an error that goog is not defined. Reading into this more it sounds like the clojure library doesn't have es6 support and a potential solution is closure-compiler-js.

Warmly,

Ryan Busby

Andrew n marshall

unread,

May 1, 2018, 7:36:54 PM5/1/18

to blo...@googlegroups.com

Hi Ryan,

I don't know specifics about Angular, however the pieces of Closure's goog that are required by Blockly are already built into the blockly_compressed.js file. If you include that, I don't believe you'll need to mess with other aspects of Closure (unless required by other aspects of your project).

--
Andrew

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ryan Busby

unread,

May 2, 2018, 2:05:38 PM5/2/18

to blo...@googlegroups.com

Hiya Andrew,

I tried requiring just blockly's files and it doesn't work as intended. I assumed that perhaps I need to include Closure's goog in some way. Thanks for clearing that up. I'm using demo-code and trying to integrate it into angularJS. I've included all the files and it doesn't work as intended. The toolbox and workspace aren't rendering properly and the tags aren't hydrating ex: name="%{BKY_CATLOGIC}" colour="%{BKY_LOGIC_HUE}"

Warmly,

Ryan Busby

--

Ryan Busby Software Engineer

Description: Description: Description: Description: NFB Consulting Logo

2501 East 28^th Street Suite 111 Signal Hill, CA 90755

t 310.526.3425 f 310.405.0838

gbe...@nfbconsulting.com www.nfbconsulting.com

P Please consider the environment before printing this e-mail.

Important Confidentiality Notice: This email is intended for the use of the addressee(s) only and may contain privileged, confidential, or proprietary information that is exempt from disclosure under law. If you have received this message in error, please inform us promptly by reply e-mail, then delete the e-mail, and destroy any printed copy. Thank you for your cooperation.

Andrew n marshall

unread,

May 2, 2018, 3:00:33 PM5/2/18

to blo...@googlegroups.com

Hi Ryan,

Are there logs or a stacktrace associated with any errors? It is hard to guess what is going wrong.

And again, I'm not very familiar with angular.

--
Andrew

Ryan Busby

unread,

May 2, 2018, 4:14:17 PM5/2/18

to blo...@googlegroups.com

Hiya Andrew,

I wish I could be more helpful here as I'm aware that we can walk backwards from an error. However, the console has no errors and the module / library just plainly isn't working. I took a copy of the demo-code and commented out the code.js file and it had the same effect.

I think my issue is integrating that file to work with AngularJS. I understand you're not familiar with AngularJS. I tried extracting the code.js file's contents and added it into a controller and no luck.

Warmly,

Ryan Busby

unread,

May 2, 2018, 8:33:45 PM5/2/18

to blo...@googlegroups.com

I've narrowed down the problem to 'Error: container is not in current document' in which blockly.inject is failing. It appears that the document.getelemenetbyId query selectors are not resolving properly causing it to fail. This might be angular specific.

Warmly,

Ryan Busby

Andrew n marshall

unread,

May 3, 2018, 1:17:28 PM5/3/18

to blo...@googlegroups.com

Just a guess, but...

Are you certain the necessary templates have populated fulling into the document before calling inject? I don't know the specifics of the Angular lifecycle.

--
Andrew

Ryan Busby

unread,

May 3, 2018, 1:59:48 PM5/3/18

to blo...@googlegroups.com

Andrew,

That's a great question! The template wasn't populating through the document selector so I hard coded it with a template literal. The template was populated at that point and I received the same container error.

Warmly,

Ryan Busby

Andrew n marshall

unread,

May 3, 2018, 2:04:34 PM5/3/18

to blo...@googlegroups.com

The template was populated...

But was it populated and added to the document?

--
Andrew

Ryan Busby

unread,

May 3, 2018, 4:37:21 PM5/3/18

to blo...@googlegroups.com

The template is what hydrates the toolbar and whatnot correct? If that is the case no it wasn't added to the document. However the html template is on the DOM. So it's on the DOM but isn't being updated programmatically. I think angular doesn't like the document.getElementById('target') = 'content'.

Ryan Busby

Andrew n marshall

unread,

May 3, 2018, 5:06:57 PM5/3/18

to blo...@googlegroups.com

document.getElementById('target') = 'content'

This requires element id="target" to be added to the document, not just a detached DOM Element. Therefore, you need to call inject() in later lifecycle method.

Blockly does not operate in a reactive manner. Our view objects are stateful, and our view references are persisted in various private object fields and cannot be replaced easily. Thus, Blockly cannot live directly in a Angular view component. I know others on this list have had success correctly initializing Blockly in Angular and Angular2. I would dig into the forum archives, searching for Angular.

--
Andrew

rbu...@nfbconsulting.com

unread,

May 10, 2018, 4:27:23 PM5/10/18

to Blockly

Andrew,

Thank you for your help. I stumbled across the forums and found people working with similar solutions. All the solutions I see are for angular 2+ as I'm using angular 1.6 these routes wouldn't work. I'm using similar techniques to get progress. Window.Blockly = Blockly && Window.goog = goog. I found a library https://github.com/cdjackson/angular-blockly that appears to work with angular however after the initial drag of the element into the workspace it breaks. I'm considering upgrading angular to solve the issue however any insight into this error would be appreciated.

The error references:

Uncaught TypeError: goog.Timer.defaultTimerObject.setTimeout is not a function

at Function.goog.Timer.callOnce (blockly_compressed:197)

at Function.Blockly.Block.terminateDrag_ (blockly_compressed.js:1007)

at Object.Blockly.terminateDrag_ (blockly_compressed.js:1224)

at blockly_compressed.js:1017

at Object.Blockly.doCommand (blockly_compressed.js:1233)

at Blockly.Block.onMouseUp_ (blockly_compressed.js:1017)

at HTMLDocument.e (blockly_compressed.js:1205)

Warmly,

Ryan Busby

--
Andrew

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Ryan Busby Software Engineer
2501 East 28^th Street Suite 111 Signal Hill, CA 90755
t 310.526.3425 f 310.405.0838
gbe...@nfbconsulting.com www.nfbconsulting.com
P Please consider the environment before printing this e-mail.
Important Confidentiality Notice: This email is intended for the use of the addressee(s) only and may contain privileged, confidential, or proprietary information that is exempt from disclosure under law. If you have received this message in error, please inform us promptly by reply e-mail, then delete the e-mail, and destroy any printed copy. Thank you for your cooperation.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Ryan Busby Software Engineer
2501 East 28^th Street Suite 111 Signal Hill, CA 90755
t 310.526.3425 f 310.405.0838
gbe...@nfbconsulting.com www.nfbconsulting.com
P Please consider the environment before printing this e-mail.
Important Confidentiality Notice: This email is intended for the use of the addressee(s) only and may contain privileged, confidential, or proprietary information that is exempt from disclosure under law. If you have received this message in error, please inform us promptly by reply e-mail, then delete the e-mail, and destroy any printed copy. Thank you for your cooperation.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Ryan Busby Software Engineer
2501 East 28^th Street Suite 111 Signal Hill, CA 90755
t 310.526.3425 f 310.405.0838
gbe...@nfbconsulting.com www.nfbconsulting.com
P Please consider the environment before printing this e-mail.
Important Confidentiality Notice: This email is intended for the use of the addressee(s) only and may contain privileged, confidential, or proprietary information that is exempt from disclosure under law. If you have received this message in error, please inform us promptly by reply e-mail, then delete the e-mail, and destroy any printed copy. Thank you for your cooperation.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
Ryan Busby Software Engineer
2501 East 28^th Street Suite 111 Signal Hill, CA 90755
t 310.526.3425 f 310.405.0838
gbe...@nfbconsulting.com www.nfbconsulting.com
P Please consider the environment before printing this e-mail.
Important Confidentiality Notice: This email is intended for the use of the addressee(s) only and may contain privileged, confidential, or proprietary information that is exempt from disclosure under law. If you have received this message in error, please inform us promptly by reply e-mail, then delete the e-mail, and destroy any printed copy. Thank you for your cooperation.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

Reply all

Reply to author

Forward