State changes are not working properly with Astilectron + Angular

[komyg]

Hi,

I have an app that uses Angular 10 and NgRx, and I am having some difficulties with its state changes.

The problem is that the UI is not updating correctly given the state of the app. For example, if I click on a button to open a modal popup, the modal doesn't show until I click on something else on the UI and force it to update.

I've tested my app on the latest version of Chrome and on the latest version of Electron (9.1.2) and it worked fine. I also upgrade the Electron from Astilectron to version 9.1.2 but the error remained.

Here is an example:

Notice that the modal only appears after I click on the arrows that change the screen.

This is how it looks like in Chrome when it is working:

Has anyone experienced this? Can anyone help me?

Thanks, Felipe

[asticode]

Are you getting any JS error (using the dev tools)?

[komyg]

Hi,

No, I am not getting any errors. I am only getting these warnings:

electron/js2c/renderer_init.js:134 Electron Security Warning (Node.js Integration with Remote Content) This renderer process has Node.js integration enabled
    and attempted to load remote content from 'https://my-site.com?embedded=true'. This
    exposes users of this app to severe security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ electron/js2c/renderer_init.js:134
electron/js2c/renderer_init.js:134 Electron Security Warning (enableRemoteModule) This renderer process has "enableRemoteModule" enabled
    and attempted to load remote content from 'https://my-site.com?embedded=true'. This
    exposes users of this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ electron/js2c/renderer_init.js:134
electron/js2c/renderer_init.js:134 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.

Maybe they have something to do with the problem... Are these configurations available on Go-Astilectron or on the Astilectron directly?

Please note that my site is being opened from a remote location via HTTPS. I am not bundling the JS part with the Go program.

Thanks, Komyg

[asticode]

If you know how to update astilectron JS and test it, you can try to remove this line and see if that makes any difference.

If you add debug logs on click events, do you see them in the dev tools console at the correct moment ?

[komyg]

Hi,

Yes, the click events are happening when they should.

As for the astilectron, I removed the line you mentioned and my app worked!

However I am now getting this error in Astilectron:

VM230:1 Uncaught ReferenceError: require is not defined
    at <anonymous>:1:23
    at WebFrame.e.startsWith.WebFrame.<computed> [as executeJavaScript] (electron/js2c/renderer_init.js:86)
    at electron/js2c/renderer_init.js:138
    at EventEmitter.<anonymous> (electron/js2c/renderer_init.js:122)
    at EventEmitter.emit (events.js:223)
    at Object.onMessage (electron/js2c/renderer_init.js:114)

[asticode]

The error message makes sense. Are you using any astilectron.* JS method ?

Basically the error is here since astilectron is always trying to set up its namespace.

If you're not using any astilectron.* JS method, the solution would be:

1) Add a DisableNodeIntegration attribute here 2) Make this value true by default, but false if node integration is disabled explicitely 3) If node integration is disabled, do not execute this javascript

I think that should cover it.

[komyg]

I am using astilectron.* JS methods in my interface to send messages between Go and JS.

Do you think there is another way that we can do this? Why do we need the node integration in Astilectron?

[asticode]

To be able to send messages between Go and JS, we need to access the ipcRenderer in the rendered window -> therefore we need this line -> therefore we need the require keyword -> therefore we need node integration

You're in a very weird situation where you're using both remote pages (which shouldn't use node integration) and messages between Go and JS (which needs node integration). I can't really think of a solution for this.

[komyg]

Well, I used to have my own websocket implementation that allowed the exchange of messages between the page and the Go program before I migrated to Astilectron. Maybe I can try to restore it and remove the dependency on the node integration.

I will also open a PR to the astilectron project with the changes you suggested.

[asticode]

Another solution would be to bundle the JS code with the GO program but I don't know whether it's a convenient solution for you.