refactor(core): avoid producing zone-related warnings during hydration when in zoneless mode (angular#57911)

This commit updates hydration code to avoid logging "unsupported configuration" warnings when in zoneless mode. PR Close angular#57911

Author: AndrewKushnir

packages/platform-browser/src/hydration.ts

@@ -19,6 +19,7 @@ import {
  ɵwithDomHydration as withDomHydration,
  ɵwithEventReplay,
  ɵwithI18nSupport,
+ ɵZONELESS_ENABLED as ZONELESS_ENABLED,
 } from '@angular/core';
 
 import {RuntimeErrorCode} from './errors';
@@ -129,9 +130,10 @@ function provideZoneJsCompatibilityDetector(): Provider[] {
  provide: ENVIRONMENT_INITIALIZER,
  useValue: () => {
  const ngZone = inject(NgZone);
+ const isZoneless = inject(ZONELESS_ENABLED);
  // Checking `ngZone instanceof NgZone` would be insufficient here,
  // because custom implementations might use NgZone as a base class.
- if (ngZone.constructor !== NgZone) {
+ if (!isZoneless && ngZone.constructor !== NgZone) {
  const console = inject(Console);
  const message = formatRuntimeError(
  RuntimeErrorCode.UNSUPPORTED_ZONEJS_INSTANCE,

packages/platform-server/test/hydration_spec.ts

@@ -41,6 +41,7 @@ import {
  Pipe,
  PipeTransform,
  PLATFORM_ID,
+ provideExperimentalZonelessChangeDetection,
  Provider,
  QueryList,
  TemplateRef,
@@ -7950,6 +7951,47 @@ describe('platform-server hydration integration', () => {
  });
  });
 
+ describe('zoneless', () => {
+ it('should not produce "unsupported configuration" warnings for zoneless mode', async () => {
+ @Component({
+ standalone: true,
+ selector: 'app',
+ template: `
+ <header>Header</header>
+ <footer>Footer</footer>
+ `,
+ })
+ class SimpleComponent {}
+
+ const html = await ssr(SimpleComponent);
+ const ssrContents = getAppContents(html);
+
+ expect(ssrContents).toContain(`<app ${NGH_ATTR_NAME}`);
+
+ resetTViewsFor(SimpleComponent);
+
+ const appRef = await renderAndHydrate(doc, html, SimpleComponent, {
+ envProviders: [
+ withDebugConsole(),
+ provideExperimentalZonelessChangeDetection() as unknown as Provider[],
+ ],
+ });
+ const compRef = getComponentRef<SimpleComponent>(appRef);
+ appRef.tick();
+
+ // Make sure there are no extra logs in case zoneless mode is enabled.
+ verifyHasNoLog(
+ appRef,
+ 'NG05000: Angular detected that hydration was enabled for an application ' +
+ 'that uses a custom or a noop Zone.js implementation.',
+ );
+
+ const clientRootNode = compRef.location.nativeElement;
+ verifyAllNodesClaimedForHydration(clientRootNode);
+ verifyClientAndSSRContentsMatch(ssrContents, clientRootNode);
+ });
+ });
+
  describe('Router', () => {
  it('should wait for lazy routes before triggering post-hydration cleanup', async () => {
  const ngZone = TestBed.inject(NgZone);