Skip to content

Commit

Permalink
refactor(core): avoid producing zone-related warnings during hydratio…
Browse files Browse the repository at this point in the history
…n when in zoneless mode (#57911)

This commit updates hydration code to avoid logging "unsupported configuration" warnings when in zoneless mode.

PR Close #57911
  • Loading branch information
AndrewKushnir authored and pkozlowski-opensource committed Sep 24, 2024
1 parent b7b0052 commit 97e2841
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 1 deletion.
4 changes: 3 additions & 1 deletion packages/platform-browser/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
ɵwithDomHydration as withDomHydration,
ɵwithEventReplay,
ɵwithI18nSupport,
ɵZONELESS_ENABLED as ZONELESS_ENABLED,
} from '@angular/core';

import {RuntimeErrorCode} from './errors';
Expand Down Expand Up @@ -130,9 +131,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,
Expand Down
42 changes: 42 additions & 0 deletions packages/platform-server/test/hydration_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
Pipe,
PipeTransform,
PLATFORM_ID,
provideExperimentalZonelessChangeDetection,
Provider,
QueryList,
TemplateRef,
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 97e2841

Please sign in to comment.