Property 'JavaScript' does not exist on type 'typeof Blockly'

Question

I integrated the Google "Blockly" library in an Angular project, but I am getting the following error when I want to convert the elements of my workspace to javascript code. I made an example with this same library using vanilla script and had no problem. I would like to know if you have any suggestions to resolve this error, THANK YOU.

Demo using vanilla script

Code of my component:

import { Component,OnInit } from '@angular/core';

import * as Blockly from 'blockly';

@Component({
  selector: 'app-blockly',
  templateUrl: './blockly.component.html',
  styleUrls: ['./blockly.component.css']
})
export class BlocklyComponent implements OnInit {

  workspace: any;

  ngOnInit(): void {

    const toolbox = `
    <xml id="toolbox" style="display: none">
    <category name="Variables" custom="VARIABLE" colour="330"></category>
    <category name="Functions" custom="PROCEDURE" colour="330"></category>
    <category name="Logic" colour="210">
        <block type="controls_if"></block>
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_boolean"></block>
    </category>
    <category name="Loops" colour="120">
        <block type="controls_whileUntil"></block>
        <block type="controls_repeat_ext"></block>
        <block type="controls_for"></block>
    </category>
    <category name="Math" colour="230">
        <block type="math_number"></block>
        <block type="math_arithmetic"></block>
    </category>
    <category name="Functions" colour="290" custom="PROCEDURE"></category>
    <category name="Text" colour="150">
        <block type="text"></block>
        <block type="text_print"></block>
    </category>
    <category name="Login" colour="300">
        <block type="login"></block>
    </category>
    </xml>`;

    this.workspace = Blockly.inject('blocklyDiv',
      {
        toolbox,
        zoom:
        {
          controls: true,
          wheel: true,
          startScale: 1.0,
          maxScale: 2,
          minScale: 0.5,
          scaleSpeed: 1.2
        }
      });

    this.workspace.addChangeListener(this.Update);

  }

  Update(event) {

    let code = Blockly.JavaScript.workspaceToCode(this.workspace);
    document.getElementById('code').innerHTML = code;

  }
}

score 1 · Answer 1 · answered Jun 24 '20 at 00:10

1

I found one solution:

//Update generated code
  Update(event) {
     
     let code = (Blockly as any).JavaScript.workspaceToCode(Blockly.mainWorkspace);
     document.getElementById('code').innerHTML = code;

  }

answered Jun 24 '20 at 00:10

Angel

71
5

I'm having this problem too, I will try your solution (thanks!) but also I feel there must be a better way. If I find one I will come back and add it below! – James Cat Aug 19 '21 at 09:51
Looks like a fix for this is in works: https://github.com/google/blockly/issues/2995 – James Cat Aug 19 '21 at 09:53

Property 'JavaScript' does not exist on type 'typeof Blockly'

1 Answers1