Commit graph

402 commits

Author SHA1 Message Date
Andrew Kushnir
bbc2efcda2 refactor(core): hydrate components of the same type used with and without ngSkipHydration (#49943)
This commit updates hydration logic to hanlde a case when the same component is used multiple times in a template and in some of those cases, component is opted-out of hydration, for example:

```
<cmp ngSkipHydration />
<cmp />
```

Previously, the first occurrence of the `<cmp>` would result in storing the `ssrId` on a TView as `null` (since hydration is disabled for the component) and the second component instance reused the `null` as a value, thus also skipping hydration.

With the changes from this commit, the `ssrId` would be set when we come across a hydratable instance. We also make sure that the `ssrId` value never changes after we first set it to a non-`null` value.

PR Close #49943
2023-04-20 14:50:32 -07:00
Andrew Kushnir
338c7d9125 test(core): adding extra tests for hydration of view containers located after <ng-content> slots (#49920)
This commit adds extra tests to verify a couple additional use-cases related to view containers located after <ng-content> slots.

PR Close #49920
2023-04-19 14:26:43 +00:00
Andrew Kushnir
81ef9c327d refactor(core): handle empty projection slots within <ng-container> during hydration (#49920)
This commit updates hydration logic to handle cases when there are projection slots present in a template inside of an `<ng-container>` and when there are regular elements follow an <ng-content> slot (see tests for additional information). With this combination, the logic that annotates regular element locations should fallback to calculating a path from a reference node to that node. In case of an <ng-container>, the comment node is located *after* the node that needs an annotation. An existing logic was mistakenly returning an empty path, which was represented as a pointer to teh reference node. This commit fixes that and triggers a fallback to using a component host node as a reference in this case.

Resolves #49918.

PR Close #49920
2023-04-19 14:26:43 +00:00
Andrew Kushnir
5efd4fff57 refactor(core): insert special marker only when text node content is an empty string (#49877)
Empty text nodes are not present in the server-rendered HTML output, thus we inject a special marker
at a text node location to later restore an empty text node at the client. Currently, we treat text nodes with spaces as "empty" as well, however those spaces are present in the HTML and text nodes are created in a browser. Adding extra annotation in this case results in extra text nodes created on the client and may trigger hydration issues. This commit updates the code to avoid treating text nodes with spaces as "empty".

PR Close #49877
2023-04-18 19:04:28 +00:00
Alan Agius
3659e035f7 test: refactor platform-server tests to use async/await (#49855)
This commit changes the platform-server integration tests to use async/await instead of waitForAsync.

PR Close #49855
2023-04-17 14:07:34 +00:00
Andrew Kushnir
d994f8520c fix(core): include inner ViewContainerRef anchor nodes into ViewRef.rootNodes output (#49867)
Currently, the `ViewRef.rootNodes` output is missing anchor (comment) nodes for inner `ViewContainerRef`s,
when an achor node was created for that instance of a `ViewContainerRef` (which happens in all cases except
when an <ng-container> was used as a host for a view container).

This issue affects hydration logic, which relies on the number of root nodes within a view to properly determine
segments in DOM that belong to a particular view.

Resolves #49849.

PR Close #49867
2023-04-17 13:35:58 +00:00
Andrew Kushnir
96a4e74069 refactor(platform-server): refactor internal _render function (#49851)
The change in 8c3b92cfb3 inspired a followup refactor where the `_render` method can just accept a PlatformRef and an ApplicationRef instances directly.

PR Close #49851
2023-04-17 13:34:00 +00:00
Alan Agius
8c3b92cfb3 refactor(platform-server): simplify _render method (#49840)
This commits simplifies the `_render` method by using async/await.

PR Close #49840
2023-04-14 15:28:41 -04:00
Andrew Kushnir
54f18c832d refactor(core): rename internal DI token that indicates whether hydration is enabled (#49800)
This commit renames an internal token to better align it with the naming of the function (to highlight the fact that it's responsible for DOM part of the hydration).

PR Close #49800
2023-04-13 14:02:33 +00:00
Andrew Kushnir
7ee542d263 refactor(platform-server): include info about enabled features into ng-server-context (#49773)
This commit updates the logic that adds the "ng-server-context" attribute to the root elements to also include information about SSR feature enabled got an application.

PR Close #49773
2023-04-11 12:46:09 -07:00
Andrew Kushnir
b98ecbc0ce build: update minimum supported Node version from 16.13.0 -> 16.14.0 (#49771)
This commit updates the minimum supported Node version across packages from 16.13.0 -> 16.14.0 to ensure compatibility with dependencies.

PR Close #49771
2023-04-11 07:56:31 -07:00
Andrew Kushnir
83262dc0f9 refactor(core): do not enable hydration when server response was incorrect (#49750)
This commit updates the logic to avoid enabling hydration in case server response doesn't contain hydration-related info serialized. It can happen when `provideClientHydration()` call only happens on the client, but not on the server.

PR Close #49750
2023-04-10 09:03:20 -07:00
Andrew Kushnir
fe34de47bf refactor(core): add a warning when hydration annotation is missing in server response (#49743)
This commit updates the logic to detect a situation when hydration support was enabled only on the client. If that happens, Angular produces a warning in a console with a link to the error guide.

PR Close #49743
2023-04-07 09:41:55 -07:00
Andrew Kushnir
e08d6797ad refactor(core): skip hydration for components that use ShadowDom encapsulation (#49722)
The Domino DOM emulation library doesn't support shadow DOM. For such components we can not guarantee that client and server representations would match perfectly. To avoid hydration mismatch errors, such components are opted out of hydration.

PR Close #49722
2023-04-06 10:59:26 -07:00
Andrew Kushnir
5bf2b7da6f refactor(core): skip hydration for components that use i18n (instead of throwing an error) (#49722)
Currently, non-destructive hydration for i18n blocks is not supported (but support is coming!).
This commit updates the serialization logic from throwing an error when it comes across an i18n
block to annotating a component with a skip hydration flag.

PR Close #49722
2023-04-06 10:59:26 -07:00
Alan Agius
4f3abbcf93 refactor(platform-server): remove ServerRendererFactory2 and EmulatedEncapsulationServerRenderer2 (#49630)
These methods are no longer required following the fixes in https://github.com/angular/domino/pull/14/

PR Close #49630
2023-04-05 11:42:57 -07:00
Alan Agius
81e7d15ef6 feat(platform-browser): enable HTTP request caching when using provideClientHydration (#49699)
This commit adds support by default for HTTP caching when using `provideClientHydration`. Users can opt-out of this behaviour by using the `withoutHttpTransferCache` feature.

```ts
import {
  bootstrapApplication,
  provideClientHydration,
  withNoHttpTransferCache,
} from '@angular/platform-browser';
// ...
bootstrapApplication(RootCmp, {
  providers: [provideClientHydration(withNoHttpTransferCache())]
});
```

PR Close #49699
2023-04-04 15:04:03 -07:00
Andrew Kushnir
761e02d912 feat(platform-browser): add a public API function to enable non-destructive hydration (#49666)
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
2023-04-03 22:13:47 -07:00
Andrew Kushnir
61bedaf930 refactor(core): handle a case when ngSkipHydration is applied to the root node of an application (#49675)
This commit updates the logic to handle a case when the `ngSkipHydration` attribute is applied to the root node of an app. In this case, the hydration info should not be serialized and the contents of the app on the client should be cleared up before initial rendering.

PR Close #49675
2023-04-03 19:11:47 -07:00
Alan Agius
7870fb07fe feat(platform-server): rename provideServerSupport to provideServerRendering (#49678)
This commit renames `provideServerSupport` to `provideServerRendering`.

PR Close #49678
2023-04-03 15:00:13 -07:00
Alan Agius
2703fd6260 refactor: remove deprecated EventManager method addGlobalEventListener (#49645)
This commit removed the deprecated `EventManager` method  `addGlobalEventListener`.

BREAKING CHANGE: Deprecated `EventManager` method `addGlobalEventListener` has been removed as it is not used by Ivy.

PR Close #49645
2023-03-30 09:47:54 -07:00
Andrew Kushnir
d786856c46 refactor(core): output hydration stats into a console in dev mode (#49617)
This commit adds a logic to output basic hydration stats into a console. This is also helpful to ensure that hydration is enabled and works.

PR Close #49617
2023-03-30 09:42:05 -07:00
Alan Agius
427b5fc2a2 test: update platform-server integration test expected CSS (#49461)
This commit update the expected output due to changes in Domino.

PR Close #49461
2023-03-30 09:40:31 -07:00
Alan Agius
c024574f46 feat(core): expose makeStateKey, StateKey and TransferState (#49563)
This commits adds `makeStateKey`, `StateKey` and  `TransferState` methods in `@angular/core` as public API and deprecated the same exported symbols in `@angular/platform-browser`.

DEPRECATED:  `makeStateKey`, `StateKey` and  `TransferState` exports have been moved from `@angular/platform-browser` to `@angular/core`. Please update the imports.

```diff
- import {makeStateKey, StateKey, TransferState} from '@angular/platform-browser';
+ import {makeStateKey, StateKey, TransferState} from '@angular/core';
```

PR Close #49563
2023-03-29 10:18:02 -07:00
Alan Agius
e99460865e refactor(platform-server): deprecate useAbsoluteUrl and baseUrl (#49546)
These two options where created for a feature which was never completed. https://github.com/angular/universal/pull/1860

Eventually these options should be added to `withTransferCache` HTTP logic.

DEPRECATED: `PlatformConfig.baseUrl` and `PlatformConfig.useAbsoluteUrl` platform-server config options  are deprecated as these were not used.

PR Close #49546
2023-03-29 09:13:41 -07:00
Alan Agius
45a6ac09fd fix(http): force macro task creation during HTTP request (#49546)
This commit adds a background macrotask when an XHR request is performed. The macrotask is started during `loadstart` and ended during `loadend` event.

The macrotask is needed so that the application is not stabilized during HTTP calls. This is important for server rendering, as the application is rendering when the application is stabilized.
The application is stabilized when there are no longer pending Macro and Micro tasks intercepted by Zone.js, Since an XHR request is none of these, we create a background macrotask so that Zone.js is
made aware that there is something pending.

Prior to this change, we patched the `HttpHandler` in `@angular/platform-server` but this is not enough, as there can be multiple `HttpHandler` in an application, example when importing `HttpClient` in a lazy loaded component/module.
Which causes a new unpatched instance of `HttpHandler` to be created in the child injector which is not intercepted by Zone.js and thus the application is stabalized and rendered before the XHR request is finalized.

NB: Zone.js is fundamental for SSR and currently, it's not possible to do SSR without it.

Closes: #49425

PR Close #49546
2023-03-29 09:13:41 -07:00
Andrew Kushnir
478c5ac150 refactor(core): internal tracker of pending tasks during initial rendering (#49576)
This commit implements a simple tracker of the pending tasks during initial rendering. The class allows adding and removing tasks from the set. The class also exposes a promise that gets resolved once the last task is removed.

This tracker is needed to keep track of ongoing processes like Router navigation (and potentially HTTP requests) and acts as a signaling mechanism to SSR and hydration that the application is in the "stable" state and a serialization can be performed.

This class would also act as a future replacement for the `ApplicationRef.isStable` for zoneless applications.

PR Close #49576
2023-03-28 16:19:31 -07:00
Andrew Kushnir
22688b8ff3 refactor(core): handle <ng-content> with *ngIf during hydration (#49590)
This commit updates the serialization logic to avoid serializing a path for a node that was content projected (based on template information), but is not present in the DOM. This can happen if a <ng-content> is used with the *ngIf="false", for example: `<ng-content *ngIf="false" />`.

PR Close #49590
2023-03-27 12:53:12 -07:00
Andrew Kushnir
f1d3be3dee refactor(core): only annotate disconnected nodes in content projection (#49549)
Previously, we've annotated all disconnected DOM nodes, even if they are not used in content projection. However, this situation is only possible in content projection and if it happens in other cases (for example, when a node was removed using direct DOM manipulations), this should be a mismatch error.

PR Close #49549
2023-03-23 13:55:38 -07:00
Alan Agius
6e26af52fa feat(bazel): (APF) Angular Package Format updates (#49559)
Several updates to Angular Package Format.

BREAKING CHANGE:

Several changes to the Angular Package Format (APF)
- Removal of FESM2015
- Replacing ES2020 with ES2022
- Replacing FESM2020 with FESM2022

PR Close #49559
2023-03-23 08:18:45 -07:00
Andrew Scott
07cbaa3e28 Revert "feat(bazel): (APF) Angular Package Format updates (#49332)" (#49555)
This reverts commit 842d569a94.

PR Close #49555
2023-03-22 16:01:20 -07:00
Alan Agius
842d569a94 feat(bazel): (APF) Angular Package Format updates (#49332)
Several updates to Angular Package Format.

BREAKING CHANGE:

Several changes to the Angular Package Format (APF)
- Removal of FESM2015
- Replacing ES2020 with ES2022
- Replacing FESM2020 with FESM2022

PR Close #49332
2023-03-22 14:00:19 -07:00
Jessica Janiuk
0851bd5283 refactor(core): Improve hydration error handling (#49502)
This adds user friendly error messages outlining exactly where hydration
mismatches occur and what was expected with easy to read stringified
DOM. It also includes a pointer to exactly where the mismatch happened
and lets the user know what was expected.

PR Close #49502
2023-03-22 11:47:41 -07:00
Andrew Kushnir
8ea1fb7396 refactor(core): exclude disconnected nodes from hydration (#49471)
This commit updates the hydration logic to handle situations where DOM nodes might end up
being disconnected from the DOM tree. We serialize ids of those nodes into the hydration
state transfer data and use the information to switch from hydration to the regular "creation
mode" at runtime.

This situation may happen during the content projection, when some nodes don't make it
into one of the content projection slots (for example, when there is no default
<ng-content /> slot in projector component's template).

Note: we leverage the fact that we have this information available in the DOM emulation
layer (in Domino) for now. Longer-term solution should not rely on the DOM emulation and
only use internal data structures and state to compute this information.

PR Close #49471
2023-03-22 10:04:56 -07:00
Alan Agius
41f27ad086 refactor(platform-server): remove renderApplication overload that accepts a component (#49463)
This commit removes the `renderApplication` overload that accepts a root component as the first parameter.

BREAKING CHANGE:

`renderApplication` method no longer accepts a root component as first argument. Instead, provide a bootstrapping function that returns a `Promise<ApplicationRef>`.

Before
```ts
const output: string = await renderApplication(RootComponent, options);
```

Now
```ts
const bootstrap = () => bootstrapApplication(RootComponent, appConfig);
const output: string = await renderApplication(bootstrap, options);
```

PR Close #49463
2023-03-22 16:40:31 +01:00
Andrew Kushnir
504bd992ce refactor(core): add a note that hydration for i18n blocks is not yet supported (#49497)
This commit updates the serialization logic to detect a situation when i18n was used for a template and throw an error to indicate that hydration for i18n blocks is not yet supported.

Hydration for i18n blocks will be added in follow up versions.

PR Close #49497
2023-03-21 19:28:41 +01:00
Andrew Kushnir
a94b66f432 refactor(core): avoid ngSkipHydration on nodes other than component host ones (#49500)
Angular Hydration uses Components as a hydration boundary, i.e. you can enable/disable hydration on per-component basis. This commit enforces that the `ngSkipHydration` can only be applied on component host nodes (an error if thrown otherwise).

PR Close #49500
2023-03-21 18:59:25 +01:00
Andrew Kushnir
a0c289cbac refactor(core): avoid repeated views in serialized data (#49475)
This commit updates the serialization logic to recognized similar repeated views and instead of including the same info over and over again, a special field is added to the serialized view object with a number of repetitions. The hydration logic also recognizes the flag and creates the necessary number of dehydrated views in a container.

This optimization should help minimize the amount of extra annotations required for cases like *ngFor with large number of items.

PR Close #49475
2023-03-21 18:40:29 +01:00
Andrew Kushnir
3ef5d87408 refactor(core): post-hydration cleanup of unclaimed views (#49455)
This commit adds a logic to remove all views that were not cleaimed during the hydration. The process is started once the ApplicationRef becomes stable on the client (which matches the timing of serialization on the server).

PR Close #49455
2023-03-21 18:17:41 +01:00
Andrew Kushnir
ced237693a refactor(core): adding hydration for content projection (#49454)
This commit adds serialization and hydration logic for content projection.

While hydration for regular elements relies on their location in the TNode tree, the content projection may move elements around, so in order to hydrate them correcty, the runtime needs some extra information. This commit adds a serialization logic that adds element locations (instructions on how to navigate to a particular element from another known location of other element) into the hydration state for the following cases:

- when a TNode is a first element in projection segment (other nodes are linked from that node)
- when a TNode's next sibling is different before and after projection (we serialize extra info about the template-based sibling)
- when a TNode's previous sibling was a content projection (i.e. `<ng-content>` slot), because we can not rely on the previous element in this case (projection happens at a later point)

PR Close #49454
2023-03-21 17:42:53 +01:00
Pawel Kozlowski
81b9e858a8 Revert "refactor(core): adding hydration for content projection (#49454)" (#49511)
This reverts commit 7885f35fd6.

PR Close #49511
2023-03-21 13:51:14 +01:00
Andrew Kushnir
7885f35fd6 refactor(core): adding hydration for content projection (#49454)
This commit adds serialization and hydration logic for content projection.

While hydration for regular elements relies on their location in the TNode tree, the content projection may move elements around, so in order to hydrate them correcty, the runtime needs some extra information. This commit adds a serialization logic that adds element locations (instructions on how to navigate to a particular element from another known location of other element) into the hydration state for the following cases:

- when a TNode is a first element in projection segment (other nodes are linked from that node)
- when a TNode's next sibling is different before and after projection (we serialize extra info about the template-based sibling)
- when a TNode's previous sibling was a content projection (i.e. `<ng-content>` slot), because we can not rely on the previous element in this case (projection happens at a later point)

PR Close #49454
2023-03-21 09:44:03 +01:00
Alan Agius
9636910c01 refactor(platform-browser): rename ng-app style attribute to ng-app-id (#49424)
`ng-app` is an AngularJS attribute, see https://docs.angularjs.org/api/ng/directive/ngApp. Using this attribute on a non AngularJS element can cause DI issues in AngularJS when running an AngularJS and Angular application on the same page.

As such, we avoid such problems the Angular `ng-app` attribute is renamed to `ng-app-id`.

PR Close #49424
2023-03-17 10:46:03 +01:00
Alan Agius
8cf1baee2a refactor(platform-server): remove ServerStylesHost (#49424)
With the recent changes and refactors of `dom_renderer` having a separate `ServerStylesHost` is redundant.

PR Close #49424
2023-03-17 10:46:03 +01:00
Jessica Janiuk
81e974a99d refactor(core): Handle lost adjacent text nodes during hydration (#49419)
This restores the separation between adjacent text nodes that is lost during server serialization when parsed by the browser. It adds a special comment node just prior to the serialization process that is then restored as a separated node during hydration.

PR Close #49419
2023-03-15 17:25:10 -07:00
Jessica Janiuk
1116c492fa refactor(core): Handle cases of lost empty text nodes during hydration (#49419)
During DOM serialization, empty text nodes are lost when the client parses the DOM. To solve this problem comment nodes are added where the empty nodes are located right before serialization. Those comments then get replaced during hydration with the proper empty text nodes.

PR Close #49419
2023-03-15 17:25:10 -07:00
Alan Agius
cf98777153 test: update tests to remove deprecated withServerTransition (#49422)
This commit removes the usages of `withServerTransition` form tests.

PR Close #49422
2023-03-15 17:08:18 -07:00
Alan Agius
82d6fbb109 refactor(core): generate a static application ID (#49422)
Prior to this change, a random application ID was generated each time which forced users using server rendering to provide an application ID themselves. This was needed to handle rare cases when multiple Angular applications are rendered on the same page.

With this change the application ID is no longer generated randomly and instead it is hard coded.

BREAKING CHANGE:

The `APP_ID` token value is no longer randomly generated. If you are bootstrapping multiple application on the same page you will need to set to provide the `APP_ID` yourself.

```ts
bootstrapApplication(ComponentA, {
  providers: [
   { provide: APP_ID, useValue: 'app-a' },
   // ... other providers ...
  ]
});
```

PR Close #49422
2023-03-15 17:08:17 -07:00
Andrew Kushnir
22b895a5b1 refactor(core): add hydration logic for view containers (#49382)
This commit implements hydration support for view containers, which should make `*ngIf`, `*ngFor` and other structural directive work with hydration.

The logic also respects the `ngSkipHydration` flag and skips hydration in such cases.

PR Close #49382
2023-03-14 14:22:09 -07:00
Alan Agius
056d68002f feat(platform-server): add provideServerSupport function to provide server capabilities to an application (#49380)
This commit adds the `provideServerSupport()` function that returns the `EnvironmentProviders` needed to setup server rendering without NgModules.

PR Close #49380
2023-03-14 09:23:13 -07:00
Alan Agius
86fc4d3e98 refactor(platform-browser): remove internal TRANSITION_ID token (#48253)
This was a mirror copy of the `APP_ID` token.

PR Close #48253
2023-03-09 09:33:34 -08:00
Alan Agius
9165ff2517 fix(platform-browser): reuse server generated component styles (#48253)
Prior to this change component styles generated on the server where removed prior to the client side component being rendered and attached it's own styles. In some cases this caused flickering. To mitigate this `initialNavigation: enabledBlocking'` was introduced which allowed the remove of server styles to be defer to a latter stage when the application has finished initialization.

This commit changes the need for this, by not removing the server generated component styles and reuse them for client side rendering.

PR Close #48253
2023-03-09 09:33:34 -08:00
Alan Agius
0e5f9ba6f4 fix(core): generate consistent component IDs (#48253)
Prior to this change the component IDs where generated based on a counter. This is problematic as there is no guarantee that a component will get the same ID that was assigned on the server when generated on the client side.

This is paramount to be able to re-use the component styles generated on the server.

PR Close #48253
2023-03-09 09:33:34 -08:00
Jessica Janiuk
5944f5d21e refactor(core): skip hydration annotation (#49345)
This adds the ngSkipHydration annotation, which allows users to
opt hydration boundaries out of hydration. This enables incremental
adoption of hydration by letting users skip hydration on components
that have implementation issues that conflict with hydration.

co-authored-by: AndrewKushnir <akushnir@google.com>

PR Close #49345
2023-03-08 17:56:43 +00:00
Andrew Kushnir
8e0a087674 refactor(core): hydration logic for <ng-container>s (#49303)
This commit incrementally builds on top of #49285 and adds the logic to hydrate <ng-container>s and their contents. This implementation supports simple <ng-container>s that don't have any Angular features (like *ngIf/*ngFor, etc) and are not content-projected.

The subsequent commits will extend the logic further to support more complex scenarios.

PR Close #49303
2023-03-07 23:56:45 +00:00
Andrew Kushnir
e48930454a refactor(core): hydration logic for simple element and text nodes (#49285)
This commit incrementally builds on top of https://github.com/angular/angular/pull/49271 and adds the logic to hydrate elements and text nodes that don't have any Angular features (like *ngIf/*ngFor, etc) and are not content-projected.

The subsequent commits will extend the logic further to support more complex scenarios.

Co-authored-by: Jessica Janiuk <jessicajaniuk@google.com>
Co-authored-by: Andrew Kushnir <akushnir@google.com>

PR Close #49285
2023-03-06 19:43:41 +00:00
Jessica Janiuk
4ae4090d3c refactor(platform-server): Implement hydration state transfer machinery (#49271)
**Important note**: this is a first commit in a series of commits that will be needed
to support non-destructive hydration. Stay tuned for further updates!

This commit lays the foundation on top of which more hydration logic will be
added in follow up PRs. This PR includes:

* Initial serialization of hydration data
* Data transfer of hydration annotations from server side to client
* Accessing hydration info and populating internal data structures
* Initial APIs (currently private) that enable hydration (in a tree-shakable manner)
* Cleanup of annotations post hydration
* Initial test infrastructure and basic test cases

This commit does **not** expose any public APIs. They'll be exposed later, when
more hydration logic is implemented to a state when it can cover most common
use-cases.

Co-authored-by: Jessica Janiuk <jessicajaniuk@google.com>
Co-authored-by: Andrew Kushnir <akushnir@google.com>

PR Close #49271
2023-03-06 16:53:37 +00:00
Alan Agius
b5278cc115 feat(platform-server): renderApplication now accepts a bootstrapping method (#49248)
The `renderApplication` now also accepts a bootstrapping function call with return `Promise<ApplicationRef>`as the first parameter.

Example:
```ts
 const bootstrap = () => bootstrapApplication(RootComponent, appConfig);

 const output: string = await renderApplication(bootstrap);
```

PR Close #49248
2023-03-01 22:31:33 +00:00
Alan Agius
17abe6dc96 refactor(platform-server): remove deprecated renderModuleFactory (#49247)
The deprecated `renderModuleFactory` has been removed as it is no longer necessary with Ivy.

BREAKING CHANGE: `renderModuleFactory` has been removed. Use `renderModule` instead.

PR Close #49247
2023-03-01 12:32:32 -08:00
Jessica Janiuk
a08a8ff108 fix(platform-server): bundle @angular/domino in via esbuild (#49229)
This removes one line that should effectively bundle the
angular fork of domino in via esbuild.

PR Close #49229
2023-02-28 13:34:50 -08:00
Alan Agius
f594725951 refactor(core): remove Node.js v14 support (#49255)
BREAKING CHANGE: Node.js v14 support has been removed

Node.js v14 is planned to be End-of-Life on 2023-04-30. Angular will stop supporting Node.js v14 in Angular v16. Angular v16 will continue to officially support Node.js versions v16 and v18.

PR Close #49255
2023-02-28 11:00:25 -08:00
Matthieu Riegler
8869289c09 refactor(platform-server): handle #24571 todos (#49233)
This commit removes the remaining TODO(issue/24571) in platform-server code base.

PR Close #49233
2023-02-28 08:19:56 -08:00
Andrew Kushnir
a5dc9960dc refactor(core): move TransferState implementation to core (#49222)
This commit moves the `TransferState` class implementation to `@angular/core`. This class will be needed in core in followup changes and `core` can not depend on `platform-browser` package.

The `core` package does **not** export those symbols into public API surface.
The `platform-browser` package re-exports the symbols under same names for backwards-compatibility.

PR Close #49222
2023-02-27 13:08:40 -08:00
Jessica Janiuk
76731ae5c8 refactor(platform-server): Switch to using angular fork of domino (#49189)
This changes the dependency on Domino to use the recently forked version.

PR Close #49189
2023-02-24 09:33:07 -08:00
Alan Agius
9b9c818f99 perf(core): change RendererType2.styles to accept a only a flat array (#49072)
While unlikely, prior to this change it was possible to provide a nested array of styles to the render. This required the framework to handle this by doing a flatten operation. This change also renames the `flattenStyles` method as it no longer flattens the styles.

BREAKING CHANGE: `RendererType2.styles` no longer accepts a nested arrays.

Closes #48317

PR Close #49072
2023-02-17 11:11:48 -08:00
Alan Agius
2d51b5f644 Revert "fix(platform-server): insert transfer state script before other script tags (#48868)" (#49112)
This reverts commit 2fc5b70fce as this change is no longer needed since `type=module` script are deferred by default. Which causes the transfer data to be queried after the browser has finished parsing the DOM.

PR Close #49112
2023-02-17 11:09:21 -08:00
Andrew Kushnir
9105c41f44 fix(platform-server): avoid duplicate TransferState info after renderApplication call (#49094)
This commit updates the `renderApplication` function to avoid duplicate serialization of the data from the `TransferState` class. The `renderApplication` function imports providers from the `ServerModule`, which already include the `TransferState` serialization providers, but the same providers were also included inside the `renderApplication` as well, which led to the duplication.

PR Close #49094
2023-02-16 16:00:29 -08:00
Alan Agius
02d5e8d79d fix(platform-browser): remove styles from DOM of destroyed components (#48298)
Currently style of components using `encapsulation`, `None` or `Emulated` will not be removed from the DOM once the component get destroyed.

This change addresses this by keeping track of the number of times a component is rendered, when the component is destroyed the counter is decreased and once this reaches zero the style element is removed from the DOM.

Currently, this new behaviour is on opt-in bases, but it will be changed in the next major version.

To opt-in, set the `REMOVE_STYLES_ON_COMPONENT_DESTROY` DI token to `true`.

Example
```ts
@NgModule({
 declarations: [
   AppComponent,
 ],
 imports: [
   BrowserModule
 ],
 providers: [
   { provide: REMOVE_STYLES_ON_COMPONENT_DESTROY, useValue: true }
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }
```

Closes #16670

PR Close #48298
2023-02-16 15:31:24 -08:00
Alan Agius
2fc5b70fce fix(platform-server): insert transfer state script before other script tags (#48868)
Previously, the state `script` was always appended as the last item in the `body` tag. This can result in the state not being available when the Angular application is bootstrap.
A workaround for this was to delay the bootstrapping of the application until by using the `DOMContentLoaded` event listener.

```ts
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

document.addEventListener('DOMContentLoaded', bootstrap);
```

With this change the above workaround is no longer necessary as the state `script` tag is now added prior of any other `script` which guarantees that the state is present prior of the Angular application is bootstrapped.

PR Close #48868
2023-01-30 16:54:07 -08:00
Paul Gschwendtner
85e1c7cf48 refactor: update platform-server tests to work with ESM (#48521)
* Uses `.mjs` for circular deps tests
* Replaces `require` with ESM-equivalent. uses an import statement here
  for proper typing, and specify dependency properly.

PR Close #48521
2022-12-19 19:50:43 +00:00
Paul Gschwendtner
b96545ecd4 build: add missing dependencies to platform-server and tools/testing (#48521)
There are two build targets which never had all its runtime dependencies
properly specified. This wasn't noticed because there were macros in
`defaults.bzl` that automatically included these deps.

In a follow-up we will clean-up this legacy auto-deps feature in
`defaults.bzl`.

PR Close #48521
2022-12-19 19:50:43 +00:00
Paul Gschwendtner
211d178f0d refactor(platform-server): use proper ESM-compatible import to domino (#48521)
Now that everything runs from within ESM, we need to use the proper
default-import variant to be able to load `domino` from ESM.

PR Close #48521
2022-12-19 19:50:41 +00:00
Paul Gschwendtner
c9415e4d75 build: ensure bootstrap transitive runfiles are made available (#48521)
Since we generate a `.mjs` file as entry-point for jasmine tests,
a couple of issues prevented the transitive dependencies from
bootstrap targets to be brought in (causing resolution errors):

1. The `_files` (previously `_esm2015`) targets are no longer needed,
   and they also miss all the information on runfiles.
2. The aspect for computing linker mappings does not respect the
   `bootstrap` attribute from the `spec_entrypoint` so we manually
   add the extract ESM output targets (this rule works with the aspect
   and forwards linker mappings).

PR Close #48521
2022-12-19 19:50:41 +00:00
Paul Gschwendtner
20551503fa build: replace _es2015 shorthand with more flexible _files suffix (#48521)
For every `ts_library` target we expose a shorthand that grants
access to the JS files because `DefaultInfo` of a ts library
only exposes the `.d.ts` files.

We rename this away from `es2015` since in practice it's a much
higher target these days. Additionally we no longer use the devmode
output but rather use the prodmode output which has the explicit
`.mjs` output- compatible with ESM.

PR Close #48521
2022-12-19 19:50:41 +00:00
Kristiyan Kostadinov
dd42974b07 feat(core): support TypeScript 4.9 (#48005)
Updates to TypeScript 4.9 and resolves some of the errors and deprecation warnings that showed up as a result.

PR Close #48005
2022-12-06 10:45:33 -08:00
Alan Agius
4f7456c71d refactor(platform-browser): simplify flattenStyles method (#48293)
With this change we simplify the `flattenStyles` logic using modern JavaScript.

PR Close #48293
2022-12-02 11:36:13 -08:00
Alan Agius
ad483007b4 refactor(platform-server): remove Injector dependency for initDominoAdapter factory (#48231)
The injector is not used by this factory.

PR Close #48231
2022-11-28 09:12:35 -08:00
Joey Perrott
303bb4d27c build: reformat BUILD files (#48181)
Reformat BUILD file usage of globs.

PR Close #48181
2022-11-22 21:22:34 +00:00
Derek Cormier
f37dd0fc96 build(bazel): create AIO example playgrounds for manual testing
After the bazel migration, AIO examples are no longer fully formed in
the source tree.
2022-11-22 13:51:16 -07:00
Derek Cormier
bc1e93d639 build(bazel): refactor aio example e2es to fix windows performance
Use the same config flag to enable local vs npm deps as aio.
2022-11-22 13:51:16 -07:00
Derek Cormier
22a317de3d build(bazel): stamp targets to build, test, and serve aio against
first party deps

Architect is not compatible with disabling the rules_nodejs linker so
these targets must use npm_link to link first party deps
2022-11-22 13:51:16 -07:00
Derek Cormier
7a134cf41a build(bazel): incrementally run aio example e2e tests
Replaces the workflow where all example e2es are run at once
2022-11-22 13:51:16 -07:00
Derek Cormier
431c562815 build(bazel): add bazel targets for aio doc generation
This is an incremental step to produce dgeni output with bazel. The
generated outputs are not yet used by other targets.
2022-11-22 13:51:16 -07:00
Alan Agius
790ee17e80 fix(platform-server): call onSerialize when state is empty (#47888)
Commit a0b2d36415 (diff-3975e0ee5aa3e06ecbcd76f5fa5134612f7fd2e6802ca7d370973bd410aab55cR25-R31) changed the serialization phase logic so
that when the state is empty the script tag is not added to the document. As a side effect, this caused the `toJson` not called which caused the `onSerialize` callbacks also not to be called.
These callbacks are used to provide the value for a key when `toJson` is called. Example: https://github.com/ngrx/platform/issues/101#issuecomment-351998548

Closes #47172

PR Close #47888
2022-10-28 02:27:56 -07:00
Kristiyan Kostadinov
54e32dad3e fix(platform-server): align server renderer interface with base renderer (#47868)
The `ServerRenderer` wasn't aligned with the `Renderer2` interface which meant that it was still referring to the old `debugInfo` parameters. It also wasn't implementing the `preserveContent` argument of `selectRootElement` which can lead to incosistencies between the server and the client.

Fixes #47844.

PR Close #47868
2022-10-25 14:51:46 +02:00
Alan Agius
1b9fd46d14 feat(core): add support for Node.js version 18 (#47730)
This change aligns with the supported Node.js versions of the Angular CLI.
See: https://github.com/angular/angular-cli/pull/24026

BREAKING CHANGE: Angular no longer supports Node.js versions `14.[15-19].x` and `16.[10-12].x`. Current supported versions of Node.js are `14.20.x`, `16.13.x` and `18.10.x`.

PR Close #47730
2022-10-11 17:21:19 +00:00
Alex Rickabaugh
7de1469be6 feat(core): introduce EnvironmentProviders wrapper type (#47669)
This commit introduces a new type `EnvironmentProviders` which can be used
in contexts where Angular accepted `Provider`s destined for
`EnvironmentInjector`s. This includes contexts such as `@NgModule.providers`
and `Route.providers`.

The new type is useful for preventing such providers from accidentally
ending up in `@Component.providers`. It can be used as the return type of
provider functions (such as `provideRouter`) to enforce this safety.

Because `Provider` allows `any[]` nested arrays, the compile-time safety
provided by `EnvironmentProviders` is easily circumvented. However, the
runtime shape of `EnvironmentProviders` is not compatible with component
injectors and will result in a runtime error if it leaks through (NG0207).

A new function `makeEnvironmentProviders` is used to construct this new type
from an array of providers.

The existing `importProvidersFrom` operation previously returned a very
similar type `ImportedNgModuleProviders` which had the same goal. This
machinery is switched over to use the new `EnvironmentProviders` interface
instead (in fact, `ImportedNgModuleProviders` is now just an alias to
`EnvironmentProviders`).

PR Close #47669
2022-10-07 14:03:13 -07:00
Alex Rickabaugh
d7683a611a refactor(http): introduce the functional interceptors API (#47502)
This commit introduces new types and symbols related to functional HTTP
interceptors - interceptors which are plain functions with access to DI via
the `inject()` operation.

This new form of interceptor is not exposed publically in this commit, but
the legacy class-based interceptors are refactored to be built on top of the
new API internally.

PR Close #47502
2022-10-06 19:02:45 +00:00
Andrew Kushnir
6c7cd6ba64 refactor(platform-server): add a marker to specify how a page was rendered (#47103)
This commit updates the `renderApplication`, `renderModule` and `renderModuleFactory` functions to append a special marker (in a form of an attribute, called `ng-server-context`) to the component host elements. This marker is needed to analyze how a page was rendered.

PR Close #47103
2022-09-12 19:05:48 -07:00
Andrew Kushnir
2b4d7f6733 feat(platform-server): support document reference in render functions (#47032)
This commit updates the `renderModule` and `renderApplication` functions to also accept a document reference (in addition to the serialized document contents as a string). This should provide the necessary flexibility to NgUniversal (and other API consumers) to structure the logic to avoid serializing and parsing document multiple times during the SSR request.

PR Close #47032
2022-08-04 13:37:54 -07:00
Andrew Kushnir
07606e3181 feat(platform-browser): add isEmpty method to the TransferState class (#46915)
This commit adds the `isEmpty` method to the `TransferState` class to make it possible to check whether the state is empty or not. This is helpful in situations when the `TransferState` should be serialized and the content is transferred to the client (if the state is empty - certain operations can be omitted).

PR Close #46915
2022-07-22 09:17:47 +00:00
Andrew Kushnir
46c44de0cc refactor(platform-server): include TransferState providers into ServerModule (#46899)
This commit updates the code to include the TransferState providers (used for serialization) into the `ServerModule` instead of having the need to import the `ServerTransferStateModule` separately.

The list of providers in the `ServerTransferStateModule` is now empty and importing it is a noop. This is not a breaking change, since the `ServerModule` must be included anyways to make server rendering work correctly.

PR Close #46899
2022-07-21 12:17:43 +00:00
Andrew Kushnir
a0b2d36415 refactor(platform-server): make TransferState standalone-friendly (#46879)
This commit updates the `TransferState` to make it `providedIn: 'root'`. This makes the entire `BrowserTransferStateModule` module unnecessary, so it got deprecated as well.

The `ServerTransferStateModule` is still retained, but the `renderApplication` function now also includes the necessary tokens to serialize the `TransferState` automatically, so when using the `renderApplication` function, there is no need to include `ServerTransferStateModule` as well.

This change is a part of the ongoing efforts to update the shape of the FW APIs to make them standalone-friendly (so there is no need to import any NgModules).

PR Close #46879
2022-07-20 11:05:08 -07:00
Pawel Kozlowski
4b377d3a6d feat(core): introduce createApplication API (#46475)
The `createApplication` function makes it possible to create an
application instance (represented by the `ApplicationRef`)
without bootstrapping any components. It is useful in the
situations where ones wants to decouple and delay components
rendering and / or render multiple root components in one
application. Angular elements can use this API to create
custom element types with an environment linked to a
created application.

PR Close #46475
2022-07-18 18:20:27 +00:00
Pawel Kozlowski
71e606d3c3 feat(core): expose EnvironmentInjector on ApplicationRef (#46665)
There are legitimate cases where access to an EnvironmentInjector
of a bootstrapped application is required / convenient. It will be also
required for support of standalone components with Angular elements.

PR Close #46665
2022-07-07 13:05:27 -07:00
Derek Cormier
d2648d9d77 build(bazel): remove tsec patch to enable runfiles on Windows (#46447)
tsec previously did not use runfiles on Windows even when the flag was enabled.
The latest version now adds an option to force its usage.

PR Close #46447
2022-06-21 12:19:53 -07:00
Kristiyan Kostadinov
08d3db232c fix(platform-server): invalid style attribute being generated for null values (#46433)
Fixes that the server renderer was producing an invalid `style` attribute when a null value is passed in. Also aligns the behavior with the DOM renderer by removing the attribute when it's empty.

Fixes #46385.

PR Close #46433
2022-06-21 11:54:52 -07:00
Alex Rickabaugh
025903566e docs(core): mark the standalone APIs as Developer Preview (#46050)
This commit adds the new `@developerPreview` tag to all of the standalone
component related APIs. With this, AIO will show an API status label which
links to the documentation on Developer Preview.

PR Close #46050
2022-06-01 16:01:59 -07:00
Andrew Kushnir
c9b40b5100 refactor(core): make Testability compatible with tree-shaking (#45657)
This commit refactors the `Testability`-related logic to extract the necessary providers into a separate array, so that it can later become it's own NgModule (or exposed as an array of providers) and be excluded from the new APIs by default.

PR Close #45657
2022-05-05 11:50:23 -07:00
Andrew Kushnir
d380bb49b7 refactor(core): rename internal bootstrap function (#45896)
This commit renames an internal function that implements the core bootstrap logic. The function is exported as a private symbol (with `ɵ`), but in order to avoid any possible confusion, we include "internal" into the function name as well.

PR Close #45896
2022-05-05 10:55:56 -07:00