Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reactive Component Loader Demo
@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 { }
@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 { }
@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'
};
}
@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 {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment