TLDR
Blockly.inject()
doesn't provide XML to the browser in either the Angular sample, or my own implementation based on it.
Concept Summary
I've built out a version of the Blockly Sample for Angular with a view to getting the Code Editor working inside it. In theory, this shouldn't require a lot more than injecting the appropriate XML, adding the code.js
, and including some additional structure to the component HTML.
Angular Implementation
To implement this, I've created an Angular Service, calling a separate XML file, to supply the Blockly XML into the component - blockly.component.ts
looks like this.
Chrome DevTools Error
What I'm seeing though is an error in the console, where line 405 of code.js
says it can't find id="toolbox"
.
Looking at the HTML in the browser, it appears that the injected XML is missing from blocklyDiv
, and all I'm seeing is a structure based on SVG elements.
Rendered App
In the browser window, this is what I'm seeing rendered. As you can see, the category names are not populating, due to the console error.
Current Workaround
The only way I've found to address the problem, is to render out the XML directly using...
const blocklyDiv = document.getElementById("blocklyDiv"); blocklyDiv.innerHTML = xml;
...where xml
is a reference to the XML string itself, and cutting out the Blockly.inject()
method altogether, which feels wrong and I think likely to catch me out later when I come to the point where I need to add custom blocks into the mix.
Google Blockly Sample - Angular
I've gone back to a clean copy of the Angular sample to understand what the behavior is there. Again, there is no sign of the XML structure, just the SVG one - and no id="toolbox"
in the HTML.
At this point, I'm not sure whether I'm implementing things incorrectly, or whether there is a bug associated with Blockly.inject()
when used in Angular.
Any suggestions?