Angular 6 dynamic components

Question

I am working on a project where I need to create the component dynamically and add them to a tab, but initially I created a small project with two components and I want to load those two components dynamically inside a div

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';import{RouterModule, Router, NavigationEnd, ActivatedRoute}from "@angular/router";
import { AppComponent } from './app.component';
import { TestOne, TestTwo } from './my.component';

@NgModule({
  declarations: [
    AppComponent,
    TestOne,
    TestTwo
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      [{
        path:"first",component:TestOne
      },{
        path:"second",component:TestTwo
      }]
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { 



}

my.component.ts

import { Component } from "../../node_modules/@angular/core";

@Component({
    selector: 'test-one',
    template: '<p>Test One</p>'
  })
  export class TestOne {}

  @Component({
    selector: 'test-two',
    template: '<p>Test Two</p>'
  })
  export class TestTwo {}

app.component.ts

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '../../node_modules/@angular/router';
import { TestOne, TestTwo } from './my.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[TestOne,TestTwo]
})
export class AppComponent {
  title = 'app';
  @ViewChild('container', { read: ViewContainerRef }) _vcr:ViewContainerRef;


constructor(private componentFactoryResolver: ComponentFactoryResolver,
  private route:ActivatedRoute,private router:Router){
    router.events.subscribe(e => {
      if(e instanceof NavigationEnd){
        console.log((<any>route.firstChild.component).name);
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory((<any>route.firstChild.component).name);
        this._vcr.createComponent(componentFactory);
      }
    });

  }
}

app.component.html

<ul>
  <li>
    <h2><a routerLink="/first">test one</a></h2>
  </li>
  <li>
    <h2><a routerLink="/second">test two</a></h2>
  </li>
  <div #container></div>
</ul>

I am getting the error: ERROR in TestOne cannot be used as an entry component.

I added those two components as entryComponents in the app.module, and also in the app.components but each time I face the same problem.

Can anyone please let me know what I am missing ?

you need need to add entryComponents in the app.module like this entryComponents: [TestOne,TestTwo]. As the code looks, you add the entryComponents in the app.component.ts, You just move it to the app.module.ts code. — Khaled, Sep 13 '18 at 08:04
You should use `TestOne` as class reference not string `'TestOne'` — yurzui, Sep 13 '18 at 08:06
@Mhand7 for dynamic component loading, you can also use ngComponentOutlet or https://github.com/gund/ng-dynamic-component. — Khaled, Sep 13 '18 at 08:17
@Khaled I did add the entryComponents in the app.module and it gave me the same error. and I am using this because I am planning to open tabs for each component based on routing.. so I cannot use router-outlet — Mhand7, Sep 13 '18 at 08:24
@yurzui Can you please elaborate more on the class reference — Mhand7, Sep 13 '18 at 08:25
@khaled I will try the dynamic-component suggestion, I think it will help me. Thanks — Mhand7, Sep 13 '18 at 08:26
If you want to load the component using router than one solution would be you can separate the components in separate modules and load them using loadChildren: './test-one.module#TestOne.module' in app.module routes. it will then work — Khaled, Sep 13 '18 at 08:33

Angular 6 dynamic components

0 Answers0