How do we import Blockly into an Angular 7 application?

Question

I\'m trying to use Blockly in an Angular 7 application but I\'m unable to inject the Blockly editor.

I have downloaded the files from https://developers.google.com/b

Answer 1

I assume you're using @angular/cli.

Demo

Step 1: Install blockly

npm install blockly

Step 2: Add scripts to angular.json under the architect node:

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

Step 3: Add NO_ERRORS_SCHEMA to your AppModule (this is so that you can define custom tags in your components)

@NgModule({
  imports:      [ BrowserModule, AppRoutingModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  exports: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {
}

Step 4: Create a Component, declare Blockly as any, and implement AfterViewInit so that you can access the blockly-related elements in the DOM:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
declare var Blockly: any;

@Component({
  selector: 'app-root',
  template: `
    

    
            
            
            
            
            
            
            
    
  `
})
export class AppComponent implements AfterViewInit {
  workspace: any;
  @ViewChild('toolbox') toolbox: ElementRef;

  ngAfterViewInit(): void {
    this.workspace = Blockly.inject('blocklyDiv',
    {toolbox: this.toolbox.nativeElement });
  }
}

NOTE: The Blockly package in NPM is at v1.0, while the latest version is v1.2. To use the latest, just download the library, put it in a known directory, and fix your script references (Step 2).