Неподдерживаемая гидратацией проекция DOM-узлов

Эта ошибка означает, что в процессе сериализации на стороне сервера Angular обнаружил узлы, созданные вне контекста Angular (например, с использованием нативных DOM API), которые были переданы в качестве проецируемых узлов (projectable nodes). Вероятнее всего, они были переданы при использовании API ViewContainerRef.createComponent или createComponent. Гидратация Angular не поддерживает такой сценарий использования.

Подробную информацию о гидратации можно найти в этом руководстве.

Следующий пример кода вызовет эту ошибку.

@Component({
  selector: 'dynamic',
  template: `
  <ng-content />
`,
})
class DynamicComponent {
}

@Component({
  selector: 'app',
  template: `<div #target></div>`,
})
class SimpleComponent {
  @ViewChild('target', {read: ViewContainerRef}) vcr!: ViewContainerRef;
  envInjector = inject(EnvironmentInjector);

  ngAfterViewInit() {
    const div = document.createElement('div');
    const p = document.createElement('p');
    // В этом тесте мы создаем DOM-узлы вне контекста Angular
    // (т.е. не используя API Angular) и пытаемся выполнить проекцию контента.
    // Это неподдерживаемый паттерн, поэтому будет выброшено исключение.
    const compRef = createComponent(DynamicComponent, {
      environmentInjector: this.envInjector,
      projectableNodes: [[div, p]]
    });
  }
}

Отладка ошибки

Сообщение об ошибке в консоли разработчика должно содержать информацию о конкретной части DOM-структуры приложения, которая вызывает проблему. Проверьте эту часть приложения на наличие ошибок, связанных с гидратацией, таких как прямые манипуляции с DOM с использованием нативных API.

В качестве возможного обходного решения можно добавить атрибут ngSkipHydration к хост-узлу вашего компонента.