Reactive Component Loader Demo

+title-v1.module.ts

@Component({
  selector: 'wt-title-v1',
  template: `<h1>v1: {{ title }}</h1>`
})
export class TitleV1Component {
  @Input() title: string;
}

@NgModule({
  imports: [CommonModule],
  declarations: [TitleV1Component],
  /* WARNING: Component should be declared as an entry component to survive tree shaking. */
  entryComponents: [TitleV1Component]
})
export class TitleV1Module { }

+title-v2.module.ts

@Component({
  selector: 'wt-title-v2',
  template: `<h2>v2: {{ title }}</h2>`
})
export class TitleV2Component {
  @Input() title: string;
}

@NgModule({
  imports: [CommonModule],
  declarations: [TitleV2Component],
  /* WARNING: Component should be declared as an entry component to survive tree shaking. */
  entryComponents: [TitleV2Component]
})
export class TitleV2Module { }

app.component.ts

@Component({
  selector: 'wt-app',
  template: `
<button (click)="location = locationV1">V1</button>
<button (click)="location = locationV2">V2</button>

<wt-lazy
  [location]="location"
  [inputs]="{title: 'wishtack'}"></wt-lazy>
  `
})
export class AppComponent {

  location: ComponentLocation;

  locationV1: ComponentLocation = {
    moduleId: 'title-v1',
    selector: 'wt-title-v1'
  };

  locationV2: ComponentLocation = {
    moduleId: 'title-v2',
    selector: 'wt-title-v2'
  };

}

app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    ReactiveComponentLoaderModule.forRoot(),
    ReactiveComponentLoaderModule.withModule({
      moduleId: 'title-v1',
      loadChildren: './+title-v1.module#TitleV1Module'
    }),
    ReactiveComponentLoaderModule.withModule({
      moduleId: 'title-v2',
      loadChildren: './+title-v2.module#TitleV2Module'
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}