diff --git a/goldens/public-api/platform-browser/index.md b/goldens/public-api/platform-browser/index.md index c1c55d7c2d49a..16fcf27ea93d9 100644 --- a/goldens/public-api/platform-browser/index.md +++ b/goldens/public-api/platform-browser/index.md @@ -155,11 +155,9 @@ export interface HydrationFeature { // @public export const enum HydrationFeatureKind { // (undocumented) - HttpTransferCacheOptions = 2, + HttpTransferCacheOptions = 1, // (undocumented) - NoDomReuseFeature = 0, - // (undocumented) - NoHttpTransferCache = 1 + NoHttpTransferCache = 0 } // @public @deprecated @@ -260,9 +258,6 @@ export const VERSION: Version; // @public export function withHttpTransferCacheOptions(options: HttpTransferCacheOptions): HydrationFeature; -// @public -export function withNoDomReuse(): HydrationFeature; - // @public export function withNoHttpTransferCache(): HydrationFeature; diff --git a/packages/platform-browser/src/hydration.ts b/packages/platform-browser/src/hydration.ts index bddfdb905e680..abbff50e13005 100644 --- a/packages/platform-browser/src/hydration.ts +++ b/packages/platform-browser/src/hydration.ts @@ -19,7 +19,6 @@ import {RuntimeErrorCode} from './errors'; * @developerPreview */ export const enum HydrationFeatureKind { - NoDomReuseFeature, NoHttpTransferCache, HttpTransferCacheOptions, } @@ -44,46 +43,6 @@ function hydrationFeature( return {ɵkind, ɵproviders}; } -/** - * Disables DOM nodes reuse during hydration. Effectively makes - * Angular re-render an application from scratch on the client. - * - * When this option is enabled, make sure that the initial navigation - * option is configured for the Router as `enabledBlocking` by using the - * `withEnabledBlockingInitialNavigation` in the `provideRouter` call: - * - * ``` - * bootstrapApplication(RootComponent, { - * providers: [ - * provideRouter( - * // ... other features ... - * withEnabledBlockingInitialNavigation() - * ), - * provideClientHydration(withNoDomReuse()) - * ] - * }); - * ``` - * - * This would ensure that the application is rerendered after all async - * operations in the Router (such as lazy-loading of components, - * waiting for async guards and resolvers) are completed to avoid - * clearing the DOM on the client too soon, thus causing content flicker. - * - * The use of this function is discouraged, because it disables DOM nodes reuse during - * hydration. - * - * @see {@link provideRouter} - * @see {@link withEnabledBlockingInitialNavigation} - * - * @publicApi - * @developerPreview - */ -export function withNoDomReuse(): HydrationFeature { - // This feature has no providers and acts as a flag that turns off - // non-destructive hydration (which otherwise is turned on by default). - return hydrationFeature(HydrationFeatureKind.NoDomReuseFeature); -} - /** * Disables HTTP transfer cache. Effectively causes HTTP requests to be performed twice: once on the * server and other one on the browser. @@ -146,9 +105,7 @@ function provideZoneJsCompatibilityDetector(): Provider[] { * Sets up providers necessary to enable hydration functionality for the application. * * By default, the function enables the recommended set of features for the optimal - * performance for most of the applications. You can enable/disable features by - * passing special functions (from the `HydrationFeatures` set) as arguments to the - * `provideClientHydration` function. It includes the following features: + * performance for most of the applications. It includes the following features: * * * Reconciling DOM hydration. Learn more about it [here](guide/hydration). * * [`HttpClient`](api/common/http/HttpClient) response caching while running on the server and @@ -156,7 +113,6 @@ function provideZoneJsCompatibilityDetector(): Provider[] { * [here](/guide/universal#caching-data-when-using-httpclient). * * These functions allow you to disable some of the default features or configure features - * * {@link withNoDomReuse} to disable DOM nodes reuse during hydration * * {@link withNoHttpTransferCache} to disable HTTP transfer cache * * {@link withHttpTransferCacheOptions} to configure some HTTP transfer cache options * @@ -181,7 +137,6 @@ function provideZoneJsCompatibilityDetector(): Provider[] { * export class AppModule {} * ``` * - * @see {@link withNoDomReuse} * @see {@link withNoHttpTransferCache} * @see {@link withHttpTransferCacheOptions} * @@ -215,7 +170,7 @@ export function provideClientHydration(...features: HydrationFeature { return bootstrapApplication(component, {providers}); } - describe('public API', () => { - it('should allow to disable DOM hydration using `withNoDomReuse` feature', async () => { - @Component({ - standalone: true, - selector: 'app', - template: ` -
Header
-
This is hydrated content in the main element.
-
Footer
- `, - }) - class SimpleComponent { - } - - const html = - await ssr(SimpleComponent, undefined, [withDebugConsole()], [withNoDomReuse()]); - const ssrContents = getAppContents(html); - - // There should be no `ngh` annotations. - expect(ssrContents).not.toContain(`(appRef); - appRef.tick(); - - // Make sure there is no hydration-related message in a console. - verifyHasNoLog(appRef, 'Angular hydrated'); - - const clientRootNode = compRef.location.nativeElement; - verifyNoNodesWereClaimedForHydration(clientRootNode); - verifyClientAndSSRContentsMatch(ssrContents, clientRootNode); - }); - }); - describe('annotations', () => { it('should add hydration annotations to component host nodes during ssr', async () => { @Component({ diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts index 46a4b873325a1..06087cdc4bd12 100644 --- a/packages/platform-server/test/integration_spec.ts +++ b/packages/platform-server/test/integration_spec.ts @@ -15,7 +15,7 @@ import {ApplicationConfig, ApplicationRef, Component, destroyPlatform, Environme import {SSR_CONTENT_INTEGRITY_MARKER} from '@angular/core/src/hydration/utils'; import {InitialRenderPendingTasks} from '@angular/core/src/initial_render_pending_tasks'; import {TestBed} from '@angular/core/testing'; -import {bootstrapApplication, BrowserModule, provideClientHydration, Title, withNoDomReuse, withNoHttpTransferCache} from '@angular/platform-browser'; +import {bootstrapApplication, BrowserModule, provideClientHydration, Title, withNoHttpTransferCache} from '@angular/platform-browser'; import {BEFORE_APP_SERIALIZED, INITIAL_CONFIG, platformServer, PlatformState, provideServerRendering, renderModule, ServerModule} from '@angular/platform-server'; import {provideRouter, RouterOutlet, Routes} from '@angular/router'; import {Observable} from 'rxjs'; @@ -910,60 +910,6 @@ describe('platform-server integration', () => { expect(output).toMatch(/ng-server-context="ssg\|httpcache,hydration"/); }); - it('should include a set of features into `ng-server-context` attribute ' + - '(excluding disabled hydration feature)', - async () => { - const options = { - document: doc, - }; - const providers = [{ - provide: SERVER_CONTEXT, - useValue: 'ssg', - }]; - @Component({ - standalone: true, - selector: 'app', - template: `
Works!
`, - }) - class SimpleApp { - } - - const bootstrap = renderApplication( - getStandaloneBoostrapFn(SimpleApp, [provideClientHydration(withNoDomReuse())]), - {...options, platformProviders: providers}); - const output = await bootstrap; - // Dom hydration is disabled, so it should not be included. - expect(output).toMatch(/ng-server-context="ssg\|httpcache"/); - }); - - it('should not include features into `ng-server-context` attribute ' + - 'when all features are disabled', - async () => { - const options = { - document: doc, - }; - const providers = [{ - provide: SERVER_CONTEXT, - useValue: 'ssg', - }]; - @Component({ - standalone: true, - selector: 'app', - template: `
Works!
`, - }) - class SimpleApp { - } - - const bootstrap = renderApplication( - getStandaloneBoostrapFn( - SimpleApp, - [provideClientHydration(withNoDomReuse(), withNoHttpTransferCache())]), - {...options, platformProviders: providers}); - const output = await bootstrap; - // All features were disabled, so none of them are included. - expect(output).toMatch(/ng-server-context="ssg"/); - }); - it('should handle false values on attributes', async () => { const options = {document: doc}; const bootstrap = isStandalone ? renderApplication(MyHostComponentStandalone, options) :