Impossible de lire la propriété 'viewContainerRef' de non définie - angulaire, directive-angulaire, composants angulaires

J'essaie d'afficher un composant dynamique similaire (non exact) à l'exemple dans docs angulaire.

J'ai une directive dynamique avec viewContainerRef

@Directive({
selector: "[dynamicComponent]"
})
export class DynamicComponentDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}

Extrait du code du composant

@ViewChild(DynamicComponentDirective) adHost: DynamicComponentDirective;
..
ngAfterViewInit() {
let componentFactory = null;
console.log(component);
componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
// this.adHost.viewContainerRef.clear();
const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.createComponent(componentFactory);
}

Enfin ajouté <ng-template dynamicComponent></ng-template> dans le modèle

Réponses:

Vous pouvez prendre cette approche: ne pas créer de directive, donnez plutôt un identifiant à ng-template

<ng-template #dynamicComponent></ng-template>

utilisation @ViewChild décorateur dans votre classe de composant

@ViewChild("dynamicComponent", { read: ViewContainerRef }) myRef

ngAfterViewInit() {
const factory = this.componentFactoryResolver.resolveComponentFactory(component);
const ref = this.myRef.createComponent(factory);
ref.changeDetectorRef.detectChanges();
}

J'ai eu le même problème. Vous devez ajouter la directive dans le module d'application:

 @NgModule({
declarations: [
AppComponent,
...,
YourDirective,
],
imports: [
...
],
providers: [...],
bootstrap: [AppComponent],
entryComponents: [components to inject if required]
})