Angular example plugin architecture

app.component.ts

import { Component, Compiler, Injector, ReflectiveInjector } from '@angular/core';
import { ViewContainerRef, ViewChild } from '@angular/core';

import { COMPILER_PROVIDERS } from '@angular/compiler';

import * as AngularCore from '@angular/core';
import * as AngularCommon from '@angular/common';

@Component({
  selector: 'app-root',
  template: `
    <h1>
      {{title}}
    </h1>
    <input type="text" [(ngModel)]="href" size="50">
    <button (click)="load()">Load</button>

    <ng-template #pluginHost>
      Here be dragons
    </ng-template>  
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  href = 'http://localhost:4200/assets/lazy.module.js';

  @ViewChild('pluginHost') pluginHost;

  private injector: Injector;
  private compiler: Compiler;

  constructor(injector: Injector, private _vcr: ViewContainerRef) {
    this.injector = ReflectiveInjector.resolveAndCreate(COMPILER_PROVIDERS, injector);
    this.compiler = this.injector.get(Compiler);
  }

  load() {
    fetch(this.href)
    .then(response => response.text())
    .then(source => {
      const exports = {}; // this will hold module exports
      const modules = {   // this is the list of modules accessible by plugin
        '@angular/core': AngularCore,
        '@angular/common': AngularCommon
      };

      const require = (module) => modules[module]; // shim 'require'

      eval(source); // interpret the plugin source

      const mwcf = this.compiler.compileModuleAndAllComponentsSync(exports['PluginModule']);

      const componentFactory = mwcf.componentFactories
        .find(e => e.selector === 'app-plugin-component'); // find the entry component

      if (componentFactory) {
        this._vcr.clear();

        const componentRef = this._vcr.createComponent(componentFactory);
        componentRef.instance.data = 'Some Data';
      }

    });
  }
}

Build lazy module

> tsc --lib es2016,dom --experimentalDecorators true --emitDecoratorMetadata true lazy.module.ts

lazy.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-plugin-component',
  template: `
    <p>
      lazy works! {{data}}
    </p>
  `
})
export class PluginComponent implements OnInit {
  type: "PluginComponent";
  data: string = "Hello!";

  ngOnInit() {
  }

}

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [ PluginComponent ],
  entryComponents: [ PluginComponent ]
})
export class PluginModule { }

Thanks looks like a great start. Will have a close look.r