하이드레이션에서 지원하지 않는 DOM 노드 프로젝션

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

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

  ngAfterViewInit() {
    const div = document.createElement('div');
    const p = document.createElement('p');
    // 이 테스트에서는 Angular 컨텍스트 밖에서 DOM 노드를 생성합니다.
    // 즉, Angular API를 사용하지 않고 만든 노드를 콘텐츠 프로젝션하려고 합니다.
    // 지원하지 않는 패턴이므로 예외가 발생합니다.
    const compRef = createComponent(CardWrapper, {
      environmentInjector: this.envInjector,
      projectableNodes: [[div, p]],
    });
  }
}