import {Component, ComponentFactory, ComponentFactoryResolver, ViewChild, ViewContainerRef} from '@angular/core';
import {DashboardComponent} from './dashboard.component';

@Component({
  selector: 'app-admin-base',
  templateUrl: './base.component.html',
  styleUrls: [
    './base.component.css']
})
export class BaseComponent {
  menuitems = [
    {
      title: 'Dashboard', componentName: 'DashboardComponent'
    },
    {
      title: 'Front Page', componentName: 'FrontPageComponent'
    },
    {
      title: 'Courses', componentName: 'CourseComponent'
    },
    {
      title: 'Users', componentName: 'UserComponent'
    },
    {
      title: 'Server', componentName: 'ServerComponent'
    }
  ];

  @ViewChild('subContainer', {read: ViewContainerRef}) subContainer: ViewContainerRef;

  constructor(
    private compFactoryResolver: ComponentFactoryResolver
  ) {
  }
  replaceComponent(componentName) {
    console.log(componentName);
    let compFactory: ComponentFactory<any>;

    compFactory = this.compFactoryResolver.resolveComponentFactory(componentName);
      this.subContainer.clear();
      this.subContainer.createComponent(compFactory);
  }

}

<div class="container">
  <div class="row">
    <div class="col-3 horizontal-menu">
      <ul class="navbar-nav" *ngFor="let menuitem of menuitems; let i = index">
        <li class="nav-item">
          <button (click)="replaceComponent(menuitem['componentName'])">{{menuitem['title']}}</button>
        </li>
      </ul>
    </div>
    <div class="col-9">
      <ng-template #subContainer></ng-template>
    </div>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-admin-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [
    './dashboard.component.css']
})
export class DashboardComponent {
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-front-page-config',
  templateUrl: './frontpage.component.html',
  styleUrls: [
    './frontpage.component.css']
})
export class FrontPageComponent {

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {FooterComponent} from './footer.component';
import {HeaderComponent} from './header.component';
import {FrontBodyComponent} from './frontbody.component';
import {SliderComponent} from './slider.component';
import {CourseComponent} from './course.component';
import {RouterModule, Routes} from '@angular/router';
import {BaseComponent} from './Admin/base.component';
import {FrontPageComponent} from './Admin/frontpage.component';
import {DashboardComponent} from './Admin/dashboard.component';

const appRoutes: Routes = [
  { path: '',
    redirectTo: '/admin',
    pathMatch: 'full'
  },
  { path: 'crisis-center',
    component: CourseComponent
  },
];

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    HeaderComponent,
    FrontBodyComponent,
    SliderComponent,
    CourseComponent,
    BaseComponent,
    FrontPageComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: '', component: FrontBodyComponent
      },
      {
        path: 'admin', component: BaseComponent
      },
      {
        path: 'frontpage', component: FrontPageComponent
      }
      ]),
    FormsModule,
    HttpModule
  ],
  entryComponents: [DashboardComponent, FrontPageComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ERROR Error: No component factory found for DashboardComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (vendor.bundle.js:3948) [angular]
    at _NullComponentFactoryResolver.resolveComponentFactory (vendor.bundle.js:3966) [angular]
    at CodegenComponentFactoryResolver.resolveComponentFactory (vendor.bundle.js:4008) [angular]
    at BaseComponent.webpackJsonp.129.BaseComponent.replaceComponent (base.component.ts:39) [angular]
    at Object.eval [as handleEvent] (BaseComponent.html:6) [angular]
    at handleEvent (vendor.bundle.js:12451) [angular]
    at callWithDebugContext (vendor.bundle.js:13659) [angular]
    at Object.debugHandleEvent [as handleEvent] (vendor.bundle.js:13247) [angular]
    at dispatchEvent (vendor.bundle.js:9426) [angular]
    at vendor.bundle.js:10016:38 [angular]
    at HTMLButtonElement.<anonymous> (vendor.bundle.js:19064) [angular]
    at Object.onInvokeTask (vendor.bundle.js:4762) [angular]
    at ZoneDelegate.invokeTask (polyfills.bundle.js:3072) [angular]