Unable to find Blockly Generator function in Angular application

Question

I am trying to build a Blockly Application using Angular. I installed Blockly using npm . I also added the following scripts in angular.json

"scripts": [
              "node_modules/blockly/blockly_compressed.js",
              "node_modules/blockly/blocks_compressed.js",
              "node_modules/blockly/python_compressed.js",
              "node_modules/blockly/msg/en.js"
            ]

Though i can use import * as Blockly from 'blockly' to import blockly in the application and use other functions, I am not able to find Generator functions like Blockly.Python['text_indexOf']

I am using blockly: ^3.20200625.2 and @angular/cli: ~9.1.0 versions.

Am i missing something. Can anyone help me with this issue?

score 0 · Answer 1 · answered Sep 30 '20 at 07:56

I've had the same problem with electron+angular app building, the next solution had helped me.

Blockly's reference says that Python's generator class should be included with file python_compressed.js right after blockly_compressed.js. So I need to include these files.

First I've used copy-webpack-plugin to copy needed files from Blockly's install directory node_modules/blockly to assets/js:

var CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    ...
    plugins: [
        ...
            new CopyPlugin([
                {
                    from: 'node_modules/blockly/blockly_compressed.js',
                    to: 'assets/js/[name].[ext]'
                },
                {
                    from: 'node_modules/blockly/blocks_compressed.js',
                    to: 'assets/js/[name].[ext]'
                },
                {
                    from: 'node_modules/blockly/python_compressed.js',
                    to: 'assets/js/[name].[ext]'
                },
                {
                    from: 'node_modules/blockly/msg/en.js',
                    to: 'assets/js/msg/[name].[ext]'
                },
            ]),
        ...
    ]
    ...
}

After I've added scripts calling from js/assets directly from index.html's bottom:

<!DOCTYPE html>
<html>
    <head>...</head>
    <body><app-root>...</app-root></body>
    <script src="assets/js/blockly_compressed.js"></script>
    <script src="assets/js/blocks_compressed.js"></script>
    <script src="assets/js/python_compressed.js"></script>
    <script src="assets/js/msg/en.js"></script>
</html>

After webpack build check python's generator in console:

> typeof Blockly.Python
< "object"

Unable to find Blockly Generator function in Angular application

1 Answers1