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