Angular2 + loading dynamically module and component from path.

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import { NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {
Component, 
ViewContainerRef,
Compiler,
ComponentFactory,
ComponentFactoryResolver,
ModuleWithComponentFactories,
ComponentRef,
ReflectiveInjector,
SystemJsNgModuleLoader,
OnInit} from '@angular/core';

export class ModuleNode { modulePath: string; componentName: string; }

@Component({
  selector: 'my-app',
  template: `
    <div>
       hello
    </div>
  `
})

export class App implements OnInit {

  widgetConfig: string; 
  module: ModuleNode; 
  cmpRef: ComponentRef;
  
  constructor(private viewref: ViewContainerRef,
      private resolver: ComponentFactoryResolver,
      private loader: SystemJsNgModuleLoader,
      private compiler: Compiler){
        this.module = new ModuleNode();
        this.module.modulePath = "src/dynamic.module#DynamicModule";
        this.module.componentName = "TestComponent";
      }
      
  ngOnInit() {
    this.openWebApp(this.module);
  }
      
  
  openWebApp(menu:any) {
      this.loader.load(menu.modulePath)  // load the module and its components
          .then((modFac) => {
              // the missing step, need to use Compiler to resolve the module's embedded components
              this.compiler.compileModuleAndAllComponentsAsync<any>(modFac.moduleType)
  
                  .then((factory: ModuleWithComponentFactories<any>) => {
                      return factory.componentFactories.find(x => x.componentType.name === menu.componentName);
                  })
                  .then(cmpFactory => {
  
                      // need to instantiate the Module so we can use it as the provider for the new component
                      let modRef = modFac.create(this.viewref.parentInjector);
                      this.cmpRef = this.viewref.createComponent(cmpFactory, 0, modRef.injector);
                      // done, now Module and main Component are known to NG2
  
                  });
          });
  }
  
  ngOnDestroy() {
      if (this.cmpRef) {
          this.cmpRef.destroy();
      }
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
   providers: [SystemJsNgModuleLoader],
  bootstrap: [ App ]
})
export class AppModule {}

import { Component, NgModule } from '@angular/core'

@Component({
    selector: 'my-test',
    template: `
    <h1>html template of TestComponent from DynamicModule</h1>
  `
})
export class TestComponent { }


@NgModule({
    declarations: [TestComponent],
    exports: [TestComponent]
})
export class DynamicModule { }