このエラーは、サーバーサイドシリアライゼーションプロセス中に、AngularがAngularのコンテキスト外（つまりネイティブDOM APIを使用して）作成されたノードに出くわし、それらのノードがプロジェクタブルノードとして提供されていることを検出したことを意味します。それらは、ViewContainerRef.createComponentまたはcreateComponent APIを使用して提供された可能性があります。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'); // このテストでは、Angularのコンテキスト外（つまり、Angular APIを使用せずに）DOMノードを作成し、 // それらをコンテンツ投影しようとします。 // これはサポートされていないパターンであり、例外がスローされます。 const compRef = createComponent(DynamicComponent, { environmentInjector: this.envInjector, projectableNodes: [[div, p]] }); }}
エラーのデバッグ
開発者コンソールのエラーメッセージには、問題の原因となっているアプリケーションのDOM構造の特定の部分に関する情報が含まれているはずです。ネイティブAPIを使用した直接のDOM操作など、ハイドレーション関連のエラーについて、アプリケーションのその部分をレビューしてください。
可能な回避策として、コンポーネントホストノードにngSkipHydration属性を追加できます。