Spike: Test out Zoneless Change Detection

[brandonroberts]

Which scope/s are relevant/related to the feature request?

Don't know / other

Information

This is a placeholder to test out Analog with the experimental Zoneless change detection provider.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[osnoser1]

I have a small zoneless app with ssr and event replay actions using nx.

When I migrated to analog.js, I could see the ssr was deactivated, but running the app I get this exception:

ypeError: Cannot read properties of undefined (reading '_ejsa')
    at getJsactionData (chunk-T5GBXR7Y.js?v=4e96f082:22766:20)
    at chunk-T5GBXR7Y.js?v=4e96f082:22807:41
    at _ZoneDelegate.invoke (zone__js.js?v=4e96f082:295:158)
    at _ZoneImpl.run (zone__js.js?v=4e96f082:94:35)
    at zone__js.js?v=4e96f082:1956:30
    at _ZoneDelegate.invokeTask (zone__js.js?v=4e96f082:321:171)
    at _ZoneImpl.runTask (zone__js.js?v=4e96f082:131:37)
    at drainMicroTaskQueue (zone__js.js?v=4e96f082:476:23)
    at invokeTask (zone__js.js?v=4e96f082:395:11)
    at ZoneTask.invoke (zone__js.js?v=4e96f082:381:38)

When I enabled SSR using analog, I get this exception:

This is just informative, maybe you have an idea of the problems we could find with a zoneless app. I'm really interested to use analog because nitro and the api routes, I'll keep digging inside analog

[DerHerrGammler]

Its seems that the analog content provider needs somehow zone. when zonejs is not imported i got the following error. With zonejs imported everything works fine.

C:/workspace/herold-solutions/node_modules/@analogjs/content/fesm2022/analogjs-content.mjs:150
    const macroTask = Zone.current.scheduleMacroTask(`AnalogContentResolve-${Math.random()}`, () => { }, {}, () => { });
                      ^
ReferenceError: Zone is not defined
    at waitFor (C:/workspace/herold-solutions/node_modules/@analogjs/content/fesm2022/analogjs-content.mjs:150:23)
    at __vite_ssr_import_5__.Observable.pipe.__vite_ssr_import_6__.map.content.content [as _subscribe] (C:/workspace/herold-solutions/node_modules/@analogjs/content/fesm2022/analogjs-content.mjs:187:13)
    at Observable._trySubscribe (C:\workspace\herold-solutions\node_modules\rxjs\dist\cjs\internal\Observable.js:41:25)
    at C:\workspace\herold-solutions\node_modules\rxjs\dist\cjs\internal\Observable.js:35:31
    at Object.errorContext (C:\workspace\herold-solutions\node_modules\rxjs\dist\cjs\internal\util\errorContext.js:22:9)
    at Observable.subscribe (C:\workspace\herold-solutions\node_modules\rxjs\dist\cjs\internal\Observable.js:26:24)
    at C:\workspace\herold-solutions\node_modules\rxjs\dist\cjs\internal\operators\map.js:9:16
    at OperatorSubscriber.<anonymous> (C:\workspace\herold-solutions\node_modules\rxjs\dist\cjs\internal\util\lift.js:14:28)
    at C:\workspace\herold-solutions\node_modules\rxjs\dist\cjs\internal\Observable.js:30:30
    at Object.errorContext (C:\workspace\herold-solutions\node_modules\rxjs\dist\cjs\internal\util\errorContext.js:22:9)
Node.js v20.15.0

If I observe it correctly the analog-markdown component is using somehow zonejs since the app is starts just fine if I dont use that component

[tobiasegli]

Hey @brandonroberts, thanks for the recent changes towards supporting zoneless apps! :)

Tried setting up a zoneless (analog) app in my demo monorepo. Having problems removing zone.js imports I found this issue. I setup the demo app to use the trpc integration and was running into the following problem:

NG05000: Angular detected that hydration was enabled for an application that uses a custom or a noop Zone.js implementation. This is not yet a fully supported configuration. Find more at https://angular.dev/errors/NG05000
Angular is running in development mode.
/…/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs:384
    const macroTask = Zone.current.scheduleMacroTask(`AnalogContentResolve-${Math.random()}`, () => { }, {}, () => { });
                      ^

ReferenceError: Zone is not defined
    at Module.waitFor (/…/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs:384:23)
    at new AnalogWelcomeComponent (/…/apps/analog-commerce/src/app/pages/analog-welcome.component.ts:73:36)
    at NodeInjectorFactory.AnalogWelcomeComponent_Factory [as factory] (/…/apps/analog-commerce/src/app/pages/analog-welcome.component.ts:94:94)
    at getNodeInjectable (/…/node_modules/@angular/core/fesm2022/core.mjs:6066:44)
    at instantiateAllDirectives (/…/node_modules/@angular/core/fesm2022/core.mjs:12813:27)
    at createDirectivesInstances (/…/node_modules/@angular/core/fesm2022/core.mjs:12209:5)
    at ɵɵelementStart (/…/node_modules/@angular/core/fesm2022/core.mjs:24369:9)
    at Module.ɵɵelement (/…/node_modules/@angular/core/fesm2022/core.mjs:24427:5)
    at HomeComponent_Template (/…/apps/analog-commerce/src/app/pages/(home).page.ts:12:35)
    at executeTemplate (/…/node_modules/@angular/core/fesm2022/core.mjs:12169:9)

Node.js v18.20.4

Looking at this error and your pr, I'm pretty sure we need an early return at this location aswell. What do you think?

[tobiasegli]

This morning I was further migrating my demo repo and thought I might just aswell look a this trpc zoneless issue and pulled the latest changes from the beta branch. With these 3 lines added in wait-for.ts:

  if (typeof Zone === 'undefined') {
    return prom;
  }

the trpc package seems to work fine in zoneless mode. Since these are just 3 (or 5) lines of changes, I think there is no value of me submitting a RP based on my local branch fix-trpc-zoneless.

@brandonroberts, do you think theres a need of having a zoneless demo/testing app inside the analog repo going forward? Or in other words; do you think zoneless mode will require more efforts to be fully supported inside analog in the future? If yes, I might be able to help here, since I'm planning to investigate more into zoneless change detection in the next few months anyway.

[brandonroberts]

Thanks @tobiasegli. Yes, I think that would be a valuable patch for trpc also as long as its not a breaking change. Having people be able to test Zoneless support moving forward would be helpful.

I think its too early to have a separate Zoneless app in this repo, but we can put together an example repository separately and point people to that if needed.

[tobiasegli]

@brandonroberts: Ok, this makes sense. I also ran the pnpm test command on my local branch which succeeded. So it might be feasible to "merge" this into the trpc package and release it with a 1.7.3-beta.4 or something like that.

If this change got merged I could continue investigating on a zoneless analog demo app inside of my private repo. If I would run into more issues I could also just fork analog and start patching things there alongside a zoneless demo.

[brandonroberts]

@tobiasegli yep, if you submit the PR, we can get a beta release out. @analogjs/trpc is on version 0.2.45 but we can get a beta of 0.2.46-beta.1 out after its merged.

Let's track that here https://github.com/analogjs/analog/issues/1295