ApplicationRef.isStable() is not emitting?

[ejthan]

Which @ngneat/query-* package(s) are the source of the bug?

query

Is this a regression?

Yes

Description

If i use this library with provideClientHydration (ssr) i get the following message after 10 seconds:

NG0506: Angular hydration expected the ApplicationRef.isStable() to emit true, but it didn't happen within 10000ms. Angular hydration logic depends on the application becoming stable as a signal to complete hydration process.

There is a macrotask "setTimeout" which causes this.
Here is the stack:

Error: Task 'macroTask' from 'setTimeout'.
at TaskTrackingZoneSpec.onScheduleTask (http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/zone__js_plugins_task-tracking.js?v=61f6983d:25:32)
at _ZoneDelegate.scheduleTask (http://localhost:4200/polyfills.js:305:43)
at Object.onScheduleTask (http://localhost:4200/polyfills.js:229:61)
at _ZoneDelegate.scheduleTask (http://localhost:4200/polyfills.js:305:43)
at _Zone.scheduleTask (http://localhost:4200/polyfills.js:172:35)
at _Zone.scheduleMacroTask (http://localhost:4200/polyfills.js:190:19)
at scheduleMacroTaskWithCurrentZone (http://localhost:4200/polyfills.js:541:23)
at http://localhost:4200/polyfills.js:1991:20
at proto. (http://localhost:4200/polyfills.js:780:16)
at Query.scheduleGc (http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/chunk-HRNDKNRI.js?v=8c38df9a:540:25)
at Object.onSuccess (http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/chunk-HRNDKNRI.js?v=8c38df9a:793:16)
at resolve (http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/chunk-HRNDKNRI.js?v=8c38df9a:373:25)
at _ZoneDelegate.invoke (http://localhost:4200/polyfills.js:294:158)
at Object.onInvoke (http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/chunk-PQEXWVRU.js?v=8c38df9a:9311:25)
at _ZoneDelegate.invoke (http://localhost:4200/polyfills.js:294:46)
at _Zone.run (http://localhost:4200/polyfills.js:100:35)
at http://localhost:4200/polyfills.js:1028:28
at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:320:171)
at http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/chunk-PQEXWVRU.js?v=8c38df9a:9129:49
at AsyncStackTaggingZoneSpec.onInvokeTask (http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/chunk-PQEXWVRU.js?v=8c38df9a:9129:30)
at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:320:54)
at TaskTrackingZoneSpec.onInvokeTask (http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/zone__js_plugins_task-tracking.js?v=61f6983d:50:31)
at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:320:54)
at Object.onInvokeTask (http://localhost:4200/@fs/xxx/.angular/cache/17.1.1/vite/deps/chunk-PQEXWVRU.js?v=8c38df9a:9300:25)
at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:320:54)
at _Zone.runTask (http://localhost:4200/polyfills.js:137:37)
at drainMicroTaskQueue (http://localhost:4200/polyfills.js:475:23)

Looks like Query.scheduleGc is the problem.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

NG0506: Angular hydration expected the ApplicationRef.isStable() to emit `true`, but it didn't happen within 10000ms. Angular hydration logic depends on the application becoming stable as a signal to complete hydration process.

Please provide the environment you discovered this bug in

No response

Anything else?

No response

Do you want to create a pull request?

Yes

[NetanelBasal]

You're welcome to create a PR

[luii]

@NetanelBasal Do you think that we could just exclude the whole lib/or only the server part from NgZone? For the experimental NoOp Zone in v18 it should imo work just fine. For <= v17 it should be excluded from the zone maybe by wrapping the provider?

It would probably be the second inject that should be excluded right?

query/query/src/lib/query-client.ts

Lines 52 to 60 in 60684b2

	factory() {
	if (isPlatformBrowser(inject(PLATFORM_ID))) {
	inject(QueryClientMount);
	}
	return inject(QueryClientToken);
	},
	},
	);

[ejthan]

Is your suggestion to do something like this?

return inject(NgZone).runOutsideAngular(() => inject(QueryClientToken))

[luii]

Yes, since NgZone is picking up on the timers from the Garbage Collector of Tanstack, this would probably work.
I dont see any problem with this approach, tanstack has no relations to angular itself, the only thing that is being used here are the signals, which, fortunately enough, work without having the zone enabled. Same goes for the observables, these should also run without ngzone.

Baseline being: either exclude them from the zone or patch out only the the timers from it

[ejthan]

I have tested the whole thing with the following changes, but nothing has changed and I still get the same error message.

const QueryClientService = new InjectionToken<QueryClient>(
  'QueryClientService',
  {
    providedIn: 'root',
    factory() {
      if (isPlatformBrowser(inject(PLATFORM_ID))) {
        inject(QueryClientMount);
      }

      return inject(NgZone).runOutsideAngular(() => inject(QueryClientToken));
    }
  }
);

I tried that too:

const QueryClientToken = new InjectionToken<QueryClient>('QueryClient', {
  providedIn: 'root',
  factory() {
    return inject(NgZone).runOutsideAngular(() => new QueryClient(inject(QUERY_CLIENT_OPTIONS)));
  }
});

[luii]

I cant think of any other thing then, which could fix that, this is also Angular's recommendation on their new documentation: https://angular.dev/errors/NG0506#third-party-libraries