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

AndrewKushnir · pkozlowski-opensource · commit b124e50ea331 · 2024-09-24T12:52:40.000+02:00
This commit updates hydration code to avoid logging "unsupported configuration" warnings when in zoneless mode. PR Close angular#57911
diff --git a/packages/platform-browser/src/hydration.ts b/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,
diff --git a/packages/platform-server/test/hydration_spec.ts b/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);
