-
Notifications
You must be signed in to change notification settings - Fork 45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[cubing.js issue] With angular Twisty player cannot load #322
Comments
Can you give specific steps to reproduce? Don’t assume we program in
angular.
- https://cube20.org/ <http://cube20.org/> - https://golly.sf.net/
<http://golly.sf.net/> - https://alpha.twizzle.net/
/ -
…On Wed, Feb 21, 2024 at 10:39 AM BartaG512 ***@***.***> wrote:
Steps to reproduce the issue
Install cubing js in an angular project
I am importing 'cubing/twisty' in a component.
The player component is partially loeaded.
Observed behaviour
And in the browser I am getting these errors
main.ts:5 ERROR TypeError: Cannot read properties of undefined (reading 'playing')
at TwistyAnimationController.<anonymous> (index.js:169:21)
at Generator.next (<anonymous>)
at chunk-IUVSABC3.js?v=5adf3bce:56:61
at new ZoneAwarePromise (zone.js:1425:21)
at __async (chunk-IUVSABC3.js?v=5adf3bce:40:10)
at TwistyAnimationController.onPlayingProp (index.js:168:36)
at PlayingInfoProp.<anonymous> (chunk-OJEAX4NL.js:118:7)
at Generator.next (<anonymous>)
at fulfilled (chunk-IUVSABC3.js?v=5adf3bce:43:24)
at _ZoneDelegate.invoke (zone.js:368:26)
handleError @ core.mjs:7473
next @ core.mjs:34731
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:19
Subject2.next @ Subject.js:31
emit @ core.mjs:115
(anonymous) @ core.mjs:15639
invoke @ zone.js:368
run @ zone.js:130
runOutsideAngular @ core.mjs:15509
onHandleError @ core.mjs:15639
handleError @ zone.js:372
runGuarded @ zone.js:143
api.microtaskDrainDone @ zone.js:1057
drainMicroTaskQueue @ zone.js:589
Promise.then (async)
nativeScheduleMicroTask @ zone.js:558
scheduleMicroTask @ zone.js:569
scheduleTask @ zone.js:392
onScheduleTask @ core.mjs:15282
scheduleTask @ zone.js:382
onScheduleTask @ zone.js:280
scheduleTask @ zone.js:382
scheduleTask @ zone.js:217
scheduleMicroTask @ zone.js:237
scheduleResolveOrReject @ zone.js:1250
then @ zone.js:1456
runInitializers @ core.mjs:32019
(anonymous) @ core.mjs:34746
_callAndReportToErrorHandler @ core.mjs:32079
(anonymous) @ core.mjs:34744
invoke @ zone.js:368
onInvoke @ core.mjs:15613
invoke @ zone.js:367
run @ zone.js:130
run @ core.mjs:15464
internalCreateApplication @ core.mjs:34721
bootstrapApplication @ platform-browser.mjs:1124
(anonymous) @ main.ts:5
Show 40 more frames
Show less
main.ts:5 ERROR TypeError: Cannot read properties of undefined (reading 'move')
at TwistyAnimationController.<anonymous> (index.js:175:36)
at Generator.next (<anonymous>)
at chunk-IUVSABC3.js?v=5adf3bce:56:61
at new ZoneAwarePromise (zone.js:1425:21)
at __async (chunk-IUVSABC3.js?v=5adf3bce:40:10)
at TwistyAnimationController.onCatchUpMoveProp (index.js:174:40)
at CatchUpMoveProp.<anonymous> (chunk-OJEAX4NL.js:118:7)
at Generator.next (<anonymous>)
at fulfilled (chunk-IUVSABC3.js?v=5adf3bce:43:24)
🖼 Screenshots
image.png (view on web)
<https://github.com/cubing/cubing.js/assets/28688421/999fb51e-215e-4628-bbbf-c8dafbc5c2ef>
Expected behaviour
Expect the player to load
Environment
v18.18.2
***@***.***/animations": "^17.0.0",
***@***.***/common": "^17.0.0",
***@***.***/compiler": "^17.0.0",
***@***.***/core": "^17.0.0",
***@***.***/forms": "^17.0.0",
***@***.***/platform-browser": "^17.0.0",
***@***.***/platform-browser-dynamic": "^17.0.0",
***@***.***/router": "^17.0.0",
"cubing": "^0.47.1",
Additional info
*No response*
—
Reply to this email directly, view it on GitHub
<#322>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAMOLS6JMBMMUS4ILB5YALDYUYIM3AVCNFSM6AAAAABDTJCSZOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGE2DOMBXGAYDKMY>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Ok. I have created an example repository
In the src/app/app.component.ts I import cubing/twisty.
It is conflicting with zone.js I think |
Thanks for the repro repo! Unfortunately, when I try to run it in a codespace, http://localhost:4200/ hangs indefinitely instead of ever serving anything. Do you know why that might be happening? |
Can you open it in stackblitz? https://stackblitz.com/~/github.com/BartaG512/issue-demo |
I'm able to see the repro there, thanks! Unfortunately, the error is obfuscated by a lot of code that Angular injects into the stack. It looks like this has something to do with "zones": https://angular.io/guide/zone Given that this is a completely non-standard and proprietary concept that seems to break the semantics of vanilla JavaScript, I don't know if I'll be able to get to the bottom of this. If you're not particularly set on Angular, I'd suggest a light-weight setup based on |
Just to demonstrate the scope of this: That's 23 stack frames of code injected between EDIT: I actually missed a few — |
I decided to wrap it in an iframe to separate it from angular context. |
That would certainly work, but keep in mind that will result in additional overhead. You may also run out of WebGL contexts very quickly if you include multiple frames. 😔 In any case, I took a look at disabling
I'm going to poke at this a bit more, but I can't promise any results. |
I dug into this for about an hour and my conclusion is that the way Angular is rewriting From angular/angular#31730 (comment) :
This exactly resembles the issue you're encountering, where one of our It looks like this has been an issue since angular/angular-cli#22191 looks like the best hope, you may want to try supporting that. It is of course your choice if you want to use Angular, but at this point I would unfortunately strongly recommend against it. |
Angular has apparently added support to avoid using zones: angular/angular#31730 I tried upgrading deps and removing However, I was able to generate and use a scramble inside an app generated using |
Steps to reproduce the issue
Install cubing js in an angular project
I am importing 'cubing/twisty' in a component.
The player component is partially loaded.
Observed behaviour
In the browser I am getting these errors
🖼 Screenshots
Expected behaviour
Expect the player to load
Environment
v18.18.2
"@angular/animations": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"cubing": "^0.47.1",
Additional info
No response
The text was updated successfully, but these errors were encountered: