mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
761e02d912
This commit adds the `provideClientHydration` function to the public API. This function can be used to enable the non-destructive Angular hydration. Important note: the non-destructive hydration feature is in Developer Preview mode, learn more about it at https://angular.io/guide/releases#developer-preview. Before you can get started with hydration, you must have a server side rendered (SSR) application. Follow the [Angular Universal Guide](https://angular.io/guide/universal) to enable server side rendering first. Once you have SSR working with your application, you can enable hydration by visiting your main app component or module and importing `provideClientHydration` from `@angular/platform-browser`. You'll then add that provider to your app's bootstrapping providers list. ```typescript import { bootstrapApplication, provideClientHydration, } from '@angular/platform-browser'; // ... bootstrapApplication(RootCmp, { providers: [provideClientHydration()] }); ``` Alternatively if you are using NgModules, you would add `provideClientHydration` to your root app module's provider list. ```typescript import {provideClientHydration} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; @NgModule({ declarations: [RootCmp], exports: [RootCmp], bootstrap: [RootCmp], providers: [provideClientHydration()], }) export class AppModule {} ``` You can confirm hydration is enabled by opening Developer Tools in your browser and viewing the console. You should see a message that includes hydration-related stats, such as the number of components and nodes hydrated. Co-authored-by: jessicajaniuk <72768744+jessicajaniuk@users.noreply.github.com> Co-authored-by: alan-agius4 <17563226+alan-agius4@users.noreply.github.com> PR Close #49666 |
||
|---|---|---|
| .. | ||
| BUILD.bazel | ||
| hydration_spec.ts | ||
| integration_spec.ts | ||
| transfer_state_spec.ts | ||