mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
4b673d5ed7
This adds a detailed error page for the hydration invalid ngSkipHydration host error. PR Close #49689
55 lines
1.6 KiB
Markdown
55 lines
1.6 KiB
Markdown
@name Skip hydration flag is applied to an invalid node
|
|
@category runtime
|
|
@shortDescription The ngSkipHydration attribute was added to an element that is not a component host.
|
|
|
|
@description
|
|
This error occurs when the `ngSkipHydration` attribute was added to an inappropriate DOM node. The `ngSkipHydration` attribute can only be applied to component host nodes either directly in the template or via a host binding. It cannot be applied to other DOM nodes and will have no effect if done so other than causing this error.
|
|
|
|
More information about hydration can be found in [this guide](guide/hydration).
|
|
|
|
The following examples will trigger the error.
|
|
|
|
**Example 1**
|
|
|
|
In this example, the `ngSkipHydration` attribute is applied to a `<div>` using host bindings of a directive. Since the `<div>` doesn't act as a component host node, Angular will throw an error.
|
|
|
|
```typescript
|
|
@Directive({
|
|
standalone: true,
|
|
selector: '[dir]',
|
|
host: {ngSkipHydration: 'true'},
|
|
})
|
|
class Dir {
|
|
}
|
|
|
|
@Component({
|
|
standalone: true,
|
|
selector: 'app',
|
|
imports: [Dir],
|
|
template: `
|
|
<div dir></div>
|
|
`,
|
|
})
|
|
class SimpleComponent {
|
|
}
|
|
```
|
|
|
|
**Example 2**
|
|
|
|
In this example, the `ngSkipHydration` is applied to a `<div>` as an attribute via a template.
|
|
Since the `<div>` doesn't act as a component host node, Angular will throw an error.
|
|
|
|
```typescript
|
|
@Component({
|
|
standalone: true,
|
|
selector: 'app',
|
|
template: `
|
|
<div ngSkipHydration></div>
|
|
`,
|
|
})
|
|
class SimpleComponent {
|
|
}
|
|
```
|
|
|
|
@debugging
|
|
Remove the `ngSkipHydration` attribute from any invalid DOM nodes. Alternatively, move the `ngSkipHydration` attribute to the component host node either in a template or via a host binding.
|