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

This commit updates hydration code to avoid logging "unsupported configuration" warnings when in zoneless mode.
  • Loading branch information
AndrewKushnir committed Sep 21, 2024
1 parent fc59e2a commit 7219294
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 7219294

Please sign in to comment.