feat(platform-browser): add a public API function to enable non-destructive hydration#49666
Closed
AndrewKushnir wants to merge 1 commit intoangular:mainfrom
Closed
feat(platform-browser): add a public API function to enable non-destructive hydration#49666AndrewKushnir wants to merge 1 commit intoangular:mainfrom
AndrewKushnir wants to merge 1 commit intoangular:mainfrom
Conversation
da6c871 to
89217ae
Compare
alan-agius4
approved these changes
Apr 3, 2023
Contributor
alan-agius4
left a comment
There was a problem hiding this comment.
NIT: shouldn't the commit be feat?
jessicajaniuk
suggested changes
Apr 3, 2023
Contributor
jessicajaniuk
left a comment
There was a problem hiding this comment.
This looks great other than we're missing @developerPreview annotations.
89217ae to
17d9d02
Compare
provideClientHydration public API function
jessicajaniuk
approved these changes
Apr 3, 2023
Contributor
jessicajaniuk
left a comment
There was a problem hiding this comment.
🙌🏻
reviewed-for: fw-core, fw-platform-server, public-api
Contributor
Author
Contributor
Author
|
Caretaker note: this PR would require this patch in g3. |
dylhunn
approved these changes
Apr 3, 2023
Contributor
dylhunn
left a comment
There was a problem hiding this comment.
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 <[email protected]> Co-authored-by: alan-agius4 <[email protected]>
17d9d02 to
8bd8a1f
Compare
Contributor
|
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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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?