Angular Dynamic Injection Component Error

Question

I am creating a small help application to see how to dynamically insert components into one component to view the content on the page. I am getting an error pointing to a ViewContainerRef object.

This is the component that should display the contents of the nested component in the view, but it throws an error:

Here is the StatsComponent that throws an error:

export class StatsComponent implements AfterViewInit, OnDestroy {
  @Input() dynComp: DynamicComponent;
  @ViewChild(ComponentHostDirective) appComponentHost: ComponentHostDirective;
  componentRef: ComponentRef<any>;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngAfterViewInit() {
    this.loadComponent();
  }

  ngOnDestroy() {
    this.componentRef.destroy();
  }

  loadComponent() {
    console.log('inside stats component: ', this.dynComp);
    const comp = this.dynComp;
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp.component);
    console.log('host: ', this.appComponentHost);  // <-- this is undefined

    const viewContainerRef = this.appComponentHost.viewContainerRef;
    viewContainerRef.clear();

    this.componentRef = viewContainerRef.createComponent(componentFactory);
    (<DynamicComponent>this.componentRef.instance).data = comp.data;
  }

}

I have a working demo here , as well as github .

Why is the container not referencing?

[UPDATE]: now it works! Go to my demo project and github project to see it in action.

Answer 1

Angular @ViewChild(ComponentHostDirective) , ComponentHostDirective , StatsComponent:

, angular angular, Angular 2 (. )

, ComponentHostDirective AppModule. StatsComponent HomeModule, ComponentHostDirective. HomeModule.

ComponentHostDirective HomeModule,

ComponentHostDirective 2 : AppModule HomeModule!

SharedModule :

//Shared/shared.module.ts

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ComponentHostDirective
  ],
  exports: [
    CommonModule,
    ComponentHostDirective
  ]
})
export class SharedModule {}

app.module.ts

@NgModule({
  declarations: [
    ComponentHostDirective <== remove it
  ],
  imports: [
    ...
    SharedModule, // add this
    ...
  ]
})
export class AppModule { }

home.module.ts

@NgModule({
  imports: [
    ...
    SharedModule, // add this
    ...
  ]
})
export class HomeModule { }

appComponentHost ComponentHostDirective.

,

ExpressionChangedAfterItHasBeenCheckedError: . : 'undefined'. : ''.

.

ngAfterViewInit hook. ngOnInit:

export class StatsComponent implements OnInit, OnDestroy {
  ...
  ngOnInit() {
    this.loadComponent();
  }

, ExpressionChangedAfterItHasBeenCheckedError, (Thank @Maximus).

, :

Answer 2

:

this.componentRef = viewContainerRef.createComponent(componentFactory);

:

let componentRef = viewContainerRef.createComponent(componentFactory);

. let const.