How to integrate blockly uncompressed version to angular/nodejs project?

[Yonnie Lu]

I have try the following structure in my angular project:

src

  |- app

        |- app.module.ts

  |- assets

        |- google

               |- blockly

                        |- blockly_uncompressed.js

               |- closure-library

I write code in app.module.ts:

import {Blockly} from '../assets/google/blockly/blockly_uncomressed';

When i ng serve, it show error:

ERROR in src/app/app.module.ts(35,23): error TS2307: Cannot find module '../assets/google/blockly/blockly_uncomressed'.

Or i try the other way to import:

require('../assets/google/blockly/blockly_uncomressed.js');

it show error:

Module not found: Error: Can't resolve '../assets/google/blockly/blockly_uncomressed.js' in ...

I checked the code at the head of `blockly_uncompressed.js`

this.IS_NODE_JS = !!(typeof module !== 'undefined' && module.exports);

this.BLOCKLY_DIR = (function(root) {
  if (!root.IS_NODE_JS) {
    // Find name of current directory.
    var scripts = document.getElementsByTagName('script');
    var re = new RegExp('(.+)[\/]blockly_(.*)uncompressed\.js$');
    for (var i = 0, script; script = scripts[i]; i++) {
      var match = re.exec(script.src);
      if (match) {
        return match[1];
      }
    }
    alert('Could not detect Blockly\'s directory name.');
  }
  return '';
})(this);

Why it can't detect the nodejs? because this.IS_NODE_JS is false

Anyone can tell me how to develop blockly in angular / nodejs project? Thanks

[Yonnie Lu]

sorry, word typo: 

require('../assets/google/blockly/blockly_uncompressed.js');

But it still not work

[Abby Schmiedt]

Hi Yonnie, 

We don't currently offer a lot of support for node however other people have been able to get it working. More information on this topic can be found here. 

Hope this helps!

Abby

[Yonnie Lu]

Thanks, Abby. Thanks for you to bring us the great blockly visual editor.

Currently I success make the compressed version worked. But use the uncompressed version, I had fix the error i mentioned yesterday. But built the closure-library. it shows error that:

the 'fs', 'vm', 'path' module not found in some script @ closure-library. I don't know why

[Yonnie Lu]

/node_modules/google-closure-library/closure/goog/bootstrap/nodejs.js:43: ERROR - Failed to load module "fs"
var fs = require('fs');
         ^

/node_modules/google-closure-library/closure/goog/bootstrap/nodejs.js:44: ERROR - Failed to load module "path"
var path = require('path');
           ^

/node_modules/google-closure-library/closure/goog/bootstrap/nodejs.js:45: ERROR - Failed to load module "vm"
var vm = require('vm');

error like this

On Thursday, January 10, 2019 at 2:32:20 AM UTC+8, Abby Schmiedt wrote:

[Imran Shah]

I am using https://github.com/mo4islona/node-blockly in node.

While running in node, the Blockly Events don't work well.

import * as Blockly from 'node-blockly';
Blockly.Events.disable();

For angular, I refer to blockly compressed files (blocks_compressed and blockly_compressed) in .angular-cli.json app scripts. In the angular component you can then import it using:

declare var Blockly: any;

There are probably other methods through which you can get Blockly working, but this works for me.

Thanks,

Imran