Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat(platform-browser): add a public API function to enable non-destructive hydration #49666

Closed
wants to merge 1 commit into from
Closed

feat(platform-browser): add a public API function to enable non-destructive hydration #49666

wants to merge 1 commit into from

Conversation

AndrewKushnir
Copy link
Contributor

@AndrewKushnir AndrewKushnir commented Apr 1, 2023 •
edited

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 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.

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.

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 @alan-agius4

PR Type

What kind of change does this PR introduce?

  • Refactoring (no functional changes, no api changes)

Does this PR introduce a breaking change?

  • Yes
  • No

@AndrewKushnir AndrewKushnir added action: review The PR is still awaiting reviews from at least one requested reviewer area: core Issues related to the framework runtime target: major This PR is targeted for the next major release core: hydration labels Apr 1, 2023
@ngbot ngbot bot modified the milestone: Backlog Apr 1, 2023
@pullapprove pullapprove bot requested review from alxhub and atscott April 1, 2023 01:43
alan-agius4
alan-agius4 approved these changes Apr 3, 2023
View reviewed changes
Copy link
Contributor

@alan-agius4 alan-agius4 left a 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
jessicajaniuk suggested changes Apr 3, 2023
View reviewed changes
Copy link
Contributor

@jessicajaniuk jessicajaniuk left a 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.

goldens/public-api/platform-browser/index.md Show resolved Hide resolved
@AndrewKushnir AndrewKushnir modified the milestones: Backlog, v16-candidates Apr 3, 2023
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Apr 3, 2023
@AndrewKushnir AndrewKushnir changed the title refactor(platform-browser): add provideClientHydration public API function feat(platform-browser): add a public API function to enable non-destructive hydration Apr 3, 2023
jessicajaniuk
jessicajaniuk approved these changes Apr 3, 2023
View reviewed changes
Copy link
Contributor

@jessicajaniuk jessicajaniuk left a 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

@pullapprove pullapprove bot requested a review from dylhunn April 3, 2023 20:02
@AndrewKushnir
Copy link
Contributor Author

Presubmit.

@AndrewKushnir AndrewKushnir added the action: presubmit The PR is in need of a google3 presubmit label Apr 3, 2023
@AndrewKushnir
Copy link
Contributor Author

AndrewKushnir commented Apr 3, 2023 •
edited

Caretaker note: this PR would require this patch in g3.

dylhunn
dylhunn approved these changes Apr 3, 2023
View reviewed changes
Copy link
Contributor

@dylhunn dylhunn left a 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

@jessicajaniuk jessicajaniuk added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Apr 3, 2023
@jessicajaniuk jessicajaniuk removed the action: presubmit The PR is in need of a google3 presubmit label Apr 3, 2023
@AndrewKushnir @jessicajaniuk @alan-agius4
feat(platform-browser): add a public API function to enable non-destr…
8bd8a1f 
…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>
@angular-robot angular-robot bot requested a review from dylhunn April 4, 2023 01:29
@dylhunn dylhunn added the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Apr 4, 2023
@dylhunn
Copy link
Contributor

dylhunn commented Apr 4, 2023

This PR was merged into the repository by commit 761e02d.

@dylhunn dylhunn closed this in 761e02d Apr 4, 2023
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@alan-agius4 alan-agius4 alan-agius4 approved these changes

@jessicajaniuk jessicajaniuk jessicajaniuk approved these changes

@dylhunn dylhunn Awaiting requested review from dylhunn

Assignees
No one assigned
Labels
action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime core: hydration detected: feature PR contains a feature commit merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: major This PR is targeted for the next major release
Projects
None yet
Milestone
v16-candidates
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@AndrewKushnir @dylhunn @alan-agius4 @jessicajaniuk