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.
![blockly_component_ts](https://user-images.githubusercontent.com/10407622/72983813-20c27080-3dda-11ea-9a11-89bbd4e6b417.PNG)
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"
.
![code_js_405_error](https://user-images.githubusercontent.com/10407622/72982920-14d5af00-3dd8-11ea-8e0e-c7dc106ad220.PNG)
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.
![no_xml_blockly](https://user-images.githubusercontent.com/10407622/72983007-46e71100-3dd8-11ea-9e12-ed4c04b69e0f.PNG)
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.
![blockly_code_app_screen](https://user-images.githubusercontent.com/10407622/72983137-91688d80-3dd8-11ea-8282-8797bfa677a0.PNG)
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.
![clean_blockly_sample_angular](https://user-images.githubusercontent.com/10407622/72984654-27ea7e00-3ddc-11ea-8ac2-adc152e98f56.PNG)
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?