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.