brakmic

<div class="container-fluid main-container">
  <div class="row stage-area">
    <div class="col col-lg-2 col-md-3sidebar-block">
      <vr-list [modules]="availableModules | async" (vrModuleSelected)="onVrModuleSelected($event)"></vr-list>
    </div>
    <div class="col col-lg-10 col-md-9 three-dee-area">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

brakmic

  /**
   * Click handler for vr module selections (sidebar on the left)
   * Check app.routes.ts for more info on angular2 routing
   * 
   * @private
   * @param {*} event
   */
  private onVrModuleSelected(event: any) {
    const params = {
      id: event.module.id

brakmic

export const APP_ROUTES: Routes = [
  { path: '',
        children: [
          { path: '', loadChildren: './shared/wrapper#VrWrapperModule' },
          { path: ':area', loadChildren: './shared/wrapper#VrWrapperModule' }
        ]
  }
];

brakmic

import { Routes } from '@angular/router';
import { VrWrapperComponent } from './wrapper.component';

export const WRAPPER_ROUTES: Routes = [
  { path: '',
    component: VrWrapperComponent
  }
];

brakmic

<vr-element [dynamicComponent]="dynamicComponent"></vr-element>

brakmic

 const body = document.getElementsByTagName('body')[0];
// if the markup has changed remove the existing vr-module scripts first
Promise.resolve(_.each(this.activeScripts, (script, index) => {
  const oldNode = body.removeChild(document.getElementById(this.vrScriptPrefix + index));
})).then(() => {
   // clean up the view-container reference...
   this.activeScripts = [];
   _.each(cmp.scripts, (script, idx) => {
         this.appendScript(body, script, Number(idx))
   });

brakmic

// Each time the route changes take the ID and instantiate the appropriate vr element.
// If the element contains a script-array load them too.
// Check shared/directives/vr-element.directive.ts for more info regarding 
// dynamic instantiation of vr elements.
this.routeSubscription = this.route.params.subscribe((params) => {
  const id = params['id'];
  const mod = _.find(this.availableModules, (m) => m.id === id);
  if (!_.isNil(mod)) {
    this.dynamicComponent = {
      html: mod ? mod.markup : undefined,

brakmic

export function createComponentFactory(compiler: Compiler,
                                       metadata: Component):
                                              Promise<ComponentFactory<any>> {
const cmpClass = class DynamicComponent {};
const decoratedCmp = Component(metadata)(cmpClass);

@NgModule({ 
    imports: [ CommonModule ], 
    declarations: [decoratedCmp],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] })

brakmic

private appendScript(host: HTMLElement, data: string, index: number) {
    this.ngZone.runOutsideAngular(() => {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.charset = 'utf-8';
      script.id = this.vrScriptPrefix + index;
      script.defer = true;
      script.async = true;
      script.text = data;
      host.appendChild(script);

brakmic

interface IVrModule {
    id: string;
    name: string;
    type: VrModuleType;
    markup: string;
    scripts?: string[];
}