Blockly v12.3.0 UI issues with angular 18

[Chetna Bulbul]

Hi Team,

We have been using blockly in angular application. The application is currently on version 18 and going to be upgraded to version 19 soon.

We were using blockly version 10.4.3 with angular 18 and it was working fine. 
Recently we have upgraded blockly to version 12.3.0 and it started giving some errors in console as well as functionalities started behaving weird.

Attached screenshots with console errors(BlocklyUpgrade_errors.png) and UI behaviour(Blockly_UI.png).
It is mandatory for us to update the version to avoid vulnerability issues, we need to know which version of blockly is compatible with angular 18 and 19.

Can someone please help

Thanks,
Chetna

[Shawn Wallace]

Hi Chetna:

I'm not sure that those errors are Blockly-upgrade-related. It looks like it is trying to pull the sound files from the Blockly demo site and the browser is preventing the cross-site resource loading. I'm not sure exactly what the fix is in your configuration, but look for where the Blockly.inject() is happening in the code. See if there is a `media` attribute in the injection; that should point to your local directory containing all of the sound assets. 

Shawn

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/70e933b2-da55-46fa-892a-409b0d05d1b1n%40googlegroups.com.

--

Shawn Wallace
flu...@gmail.com
401-835-7550
www.fluxly.com

[Chetna Bulbul]

Hi Shawn,

We are not using 'media' attribute in Blockly.inject().

Is version 12.3.0 compatible with angular version 18/19?

The previous version i.e. 10 works fine with the same configuration and 12.3.0 gives the error.

Thanks,

Chetna

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/AEqPaFH9fJw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/CAHhTqLb%2BBb6%2BUJO4FVwvZOS6GoSrbMety4XeSvd7d-7Xpmupew%40mail.gmail.com.

[Ben Henning]

Hi Chetna,

As Shawn mentioned, this appears to be caused by a configuration in your application during the upgrade and not something that's changed in Blockly. In particular, your application is currently configured to not allow cross-site resources (such as the audio files from the Blockly demo site). It seems there were automated changes in CSP management in Angular 19 according to https://alyshovtapdig.medium.com/angular-19-and-content-security-policy-csp-en-5b49af4a7938 which is what I think you're probably running into. If you're unfamiliar with CSP, I highly recommend reading https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP in order to understand why the problem is occurring.

You can configure your application to allow these demo resources to be used, or you can configure your application to use custom resources which is described here: https://developers.google.com/blockly/guides/configure/web/media.

I hope this helps.

Ben

To view this discussion visit https://groups.google.com/d/msgid/blockly/CAGikOi%3DZ4sWZRAM2Ph1iOVi2yoHBr3akdth17kNf-FVnWGS%3D_g%40mail.gmail.com.

[Chetna Bulbul]

Thanks Ben,

It helped. I will try adding media option in configuration.

However, just realized that media is not getting loaded even with version 10.4.3 and these csp errors are there. The functionality works fine like drag and drop and everything, only thing is the click sound or the sound which comes on connecting the block is not coming which is fine for us.
After the upgrade to version 12.3.0, I can see the change in behaviour.
Please see the attached video for reference. 
This is happening only after the upgrade to version 12.3.0 and it works fine when i am downgrading it to 10.4.3.

Thanks,
Chetna

To view this discussion visit https://groups.google.com/d/msgid/blockly/CACcO7Qx6bCsx0P4EzjEp3-YCNuAr4y06u%2B6NmMOyb4JUqZuVhQ%40mail.gmail.com.

[Chetna Bulbul]

Any idea why the shadow block gets attached and the main block remains unattached.

After this, the main block sometimes become unmovable as well.

The shadow block should always be there behind the main block if i am not mistaken.

We are not using shadow in xml, we are just using block.

Can someone please help.

[Ben Henning]

Hi,

I see--the console errors weren't related and there does seem to be an actual issue upgrading to Blockly 12.3.0.

We will have trouble debugging this without more context, however. If what you're working on is open source, are you able to send a link to your pull request or change for the upgrade with instructions on how to build and reproduce the issue? If not then we will probably need a small toy example that uses Blockly 12.3.0 and configures it such that this issue can be reproduced. One way to possibly do that is to create a sample Blockly application that adds any custom blocks you may be using that could be leading to this issue.

Alternatively, are there any console errors that you see when you reproduce this issue?

We have had a few connection related bugs in Blockly v12 overall, so this may well be a real issue in core Blockly. However, we need to be able to easily reproduce the issue with core Blockly or an open source application that we can poke in order to actually understand what's happening.

Thanks,

Ben

To view this discussion visit https://groups.google.com/d/msgid/blockly/CAGikOint5Co%2BKvEYw1i60R6vOjSF2t_u8kJ9p8%2Bc_Gk%2B_hpmzw%40mail.gmail.com.

[Mark Friedman]

Chetna,

   I think that it's also worth asking if you have checked on the Blockly release notes to make sure that you aren't coming up against any of the breaking changes that occurred since version 10.4.3.  In particular, you should check the release notes for the major releases since then, namely the v11.0.0 notes and the v12.0.0 notes.

-Mark

To view this discussion visit https://groups.google.com/d/msgid/blockly/CACcO7Qzk19JZNLpOVS5Opgi1d2SAbHEfjYxhJCR3HrUh3GyePA%40mail.gmail.com.

[Vetrivel Shanmugam]

In my opinion, building blockly on top of web frameworks to help build application faster is bad idea.

the frameworks are bloated, and do not actually solve the challenge of faster application building for the developers,

while the frameworks being not stable, it is not wise to build blockly on top of it.

feel free to share your thoughts. 

About me
I'm Shan, built a cross framework code generator five years back. 

Last year I started my own firm to solve the design to code challenge by building a design tool that can build applications too.