-
Notifications
You must be signed in to change notification settings - Fork 27k
feat(platform-browser): add a public API function to enable non-destructive hydration #49666
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
da6c871 to
89217ae
Compare
alan-agius4
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NIT: shouldn't the commit be feat?
jessicajaniuk
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great other than we're missing @developerPreview annotations.
89217ae to
17d9d02
Compare
provideClientHydration public API function
jessicajaniuk
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🙌🏻
reviewed-for: fw-core, fw-platform-server, public-api
|
Caretaker note: this PR would require this patch in g3. |
dylhunn
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
reviewed-for: public-api
…uctive hydration 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>
17d9d02 to
8bd8a1f
Compare
|
This PR was merged into the repository by commit 761e02d. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
This commit adds the
provideClientHydrationfunction 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 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
provideClientHydrationfrom@angular/platform-browser. You'll then add that provider to your app's bootstrapping providers list.Alternatively if you are using NgModules, you would add
provideClientHydrationto your root app module's provider list.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 @alan-agius4
PR Type
What kind of change does this PR introduce?
Does this PR introduce a breaking change?