Jak mogę użyć / utworzyć dynamiczny szablon do kompilacji dynamicznego komponentu z Angular 2.0?

EDIT (26/08/2017) : poniższe rozwiązanie działa dobrze z Angular2 i 4. Zaktualizowałem go, aby zawierał zmienną szablonu i kliknąłem handler i Przetestowałem go z Angular 4.3.
Dla Angular4, ngComponentOutlet opisany w Ophir ' s answer jest znacznie lepszym rozwiązaniem. Ale obecnie nie obsługuje jeszcze wejść i wyjść . If [this PR] ( https://github.com/angular/angular/pull/15362] jest akceptowane, byłoby to możliwe poprzez zwracaną instancję komponentu za pomocą zdarzenia Utwórz.
ng-dynamic-component może być najlepszym i najprostszym rozwiązaniem, ale jeszcze tego nie testowałem.

@ Long Field ' s answer is spot on! Oto kolejny (synchroniczny) przykład:

import {Compiler, Component, NgModule, OnInit, ViewChild,
  ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `<h1>Dynamic template:</h1>
             <div #container></div>`
})
export class App implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler) {}

  ngOnInit() {
    this.addComponent(
      `<h4 (click)="increaseCounter()">
        Click to increase: {{counter}}
      `enter code here` </h4>`,
      {
        counter: 1,
        increaseCounter: function () {
          this.counter++;
        }
      }
    );
  }

  private addComponent(template: string, properties?: any = {}) {
    @Component({template})
    class TemplateComponent {}

    @NgModule({declarations: [TemplateComponent]})
    class TemplateModule {}

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
      comp.componentType === TemplateComponent
    );
    const component = this.container.createComponent(factory);
    Object.assign(component.instance, properties);
    // If properties are changed at a later stage, the change detection
    // may need to be triggered manually:
    // component.changeDetectorRef.detectChanges();
  }
}

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

Live at http://plnkr.co/edit/fdP9Oc .

Musiałem przybyć na imprezę późno, żadne z rozwiązań tutaj nie wydawało mi się pomocne - zbyt bałagan i czułem się jak zbyt wiele obejścia.

Skończyło się na użyciu Angular 4.0.0-beta.6's ngComponentOutlet .

To dało mi najkrótsze i najprostsze rozwiązanie zapisane w pliku komponentu dynamicznego.

• Oto prosty przykład, który po prostu odbiera tekst i umieszcza go w szablonie, ale oczywiście można zmienić zgodnie z Twoim potrzeba:

import {
  Component, OnInit, Input, NgModule, NgModuleFactory, Compiler
} from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<ng-container *ngComponentOutlet="dynamicComponent;
                            ngModuleFactory: dynamicModule;"></ng-container>`,
  styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
  dynamicComponent;
  dynamicModule: NgModuleFactory<any>;

  @Input()
  text: string;

  constructor(private compiler: Compiler) {
  }

  ngOnInit() {
    this.dynamicComponent = this.createNewComponent(this.text);
    this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));
  }

  protected createComponentModule (componentType: any) {
    @NgModule({
      imports: [],
      declarations: [
        componentType
      ],
      entryComponents: [componentType]
    })
    class RuntimeComponentModule
    {
    }
    // a module for just this Type
    return RuntimeComponentModule;
  }

  protected createNewComponent (text:string) {
    let template = `dynamically created template with text: ${text}`;

    @Component({
      selector: 'dynamic-component',
      template: template
    })
    class DynamicComponent implements OnInit{
       text: any;

       ngOnInit() {
       this.text = text;
       }
    }
    return DynamicComponent;
  }
}

• krótkie wyjaśnienie:
  1. my-component - komponent, w którym komponent dynamiczny jest renderowany
  2. DynamicComponent - komponent do dynamicznej budowy i renderowania wewnątrz my-component

Nie zapomnij uaktualnić wszystkich bibliotek angular do ^Angular 4.0.0

Mam nadzieję, że to pomoże, powodzenia!

UPDATE

Działa również na angular 5.

2019 czerwcowa odpowiedź

W momencie pisania tego artykułu nie uznałem powyższych oficjalnych dokumentów za szczególnie pomocne (szczególnie w odniesieniu do wysyłania danych do i odbierania zdarzeń z komponentów dynamicznych). Podsumowując, będziesz musiał:

Krok 1) Zaktualizuj swój AppModule

Importuj PortalModule z pakietu @angular/cdk/portal i zarejestruj Twoje komponenty dynamiczne wewnątrz entryComponents

@NgModule({
  declarations: [ ..., AppComponent, MyDynamicComponent, ... ]
  imports:      [ ..., PortalModule, ... ],
  entryComponents: [ ..., MyDynamicComponent, ... ]
})
export class AppModule { }

Punkt 2. Opcja A: jeśli nie musisz przekazywać danych do zdarzeń i odbierać ich z komponentów dynamicznych:

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClickAddChild()">Click to add child component</button>
    <ng-template [cdkPortalOutlet]="myPortal"></ng-template>
  `
})
export class AppComponent  {
  myPortal: ComponentPortal<any>;
  onClickAddChild() {
    this.myPortal = new ComponentPortal(MyDynamicComponent);
  }
}

@Component({
  selector: 'app-child',
  template: `<p>I am a child.</p>`
})
export class MyDynamicComponent{
}

Zobacz to w akcji

Punkt 2. Opcja B: jeśli musisz przekazywać dane do zdarzeń i odbierać je z komponentów dynamicznych:

// A bit of boilerplate here. Recommend putting this function in a utils 
// file in order to keep your component code a little cleaner.
function createDomPortalHost(elRef: ElementRef, injector: Injector) {
  return new DomPortalHost(
    elRef.nativeElement,
    injector.get(ComponentFactoryResolver),
    injector.get(ApplicationRef),
    injector
  );
}

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClickAddChild()">Click to add random child component</button>
    <div #portalHost></div>
  `
})
export class AppComponent {

  portalHost: DomPortalHost;
  @ViewChild('portalHost') elRef: ElementRef;

  constructor(readonly injector: Injector) {
  }

  ngOnInit() {
    this.portalHost = createDomPortalHost(this.elRef, this.injector);
  }

  onClickAddChild() {
    const myPortal = new ComponentPortal(MyDynamicComponent);
    const componentRef = this.portalHost.attach(myPortal);
    setTimeout(() => componentRef.instance.myInput 
      = '> This is data passed from AppComponent <', 1000);
    // ... if we had an output called 'myOutput' in a child component, 
    // this is how we would receive events...
    // this.componentRef.instance.myOutput.subscribe(() => ...);
  }
}

@Component({
  selector: 'app-child',
  template: `<p>I am a child. <strong>{{myInput}}</strong></p>`
})
export class MyDynamicComponent {
  @Input() myInput = '';
}

Zobacz to w akcji

Postanowiłem skompaktować wszystko, czego się nauczyłem w jeden plik. Jest tu dużo do wzięcia, szczególnie w porównaniu z przed RC5. Zauważ, że ten plik źródłowy zawiera AppModule i AppComponent.

import {
  Component, Input, ReflectiveInjector, ViewContainerRef, Compiler, NgModule, ModuleWithComponentFactories,
  OnInit, ViewChild
} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@Component({
  selector: 'app-dynamic',
  template: '<h4>Dynamic Components</h4><br>'
})
export class DynamicComponentRenderer implements OnInit {

  factory: ModuleWithComponentFactories<DynamicModule>;

  constructor(private vcRef: ViewContainerRef, private compiler: Compiler) { }

  ngOnInit() {
    if (!this.factory) {
      const dynamicComponents = {
        sayName1: {comp: SayNameComponent, inputs: {name: 'Andrew Wiles'}},
        sayAge1: {comp: SayAgeComponent, inputs: {age: 30}},
        sayName2: {comp: SayNameComponent, inputs: {name: 'Richard Taylor'}},
        sayAge2: {comp: SayAgeComponent, inputs: {age: 25}}};
      this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
        .then((moduleWithComponentFactories: ModuleWithComponentFactories<DynamicModule>) => {
          this.factory = moduleWithComponentFactories;
          Object.keys(dynamicComponents).forEach(k => {
            this.add(dynamicComponents[k]);
          })
        });
    }
  }

  addNewName(value: string) {
    this.add({comp: SayNameComponent, inputs: {name: value}})
  }

  addNewAge(value: number) {
    this.add({comp: SayAgeComponent, inputs: {age: value}})
  }

  add(comp: any) {
    const compFactory = this.factory.componentFactories.find(x => x.componentType === comp.comp);
    // If we don't want to hold a reference to the component type, we can also say: const compFactory = this.factory.componentFactories.find(x => x.selector === 'my-component-selector');
    const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
    const cmpRef = this.vcRef.createComponent(compFactory, this.vcRef.length, injector, []);
    Object.keys(comp.inputs).forEach(i => cmpRef.instance[i] = comp.inputs[i]);
  }
}

@Component({
  selector: 'app-age',
  template: '<div>My age is {{age}}!</div>'
})
class SayAgeComponent {
  @Input() public age: number;
};

@Component({
  selector: 'app-name',
  template: '<div>My name is {{name}}!</div>'
})
class SayNameComponent {
  @Input() public name: string;
};

@NgModule({
  imports: [BrowserModule],
  declarations: [SayAgeComponent, SayNameComponent]
})
class DynamicModule {}

@Component({
  selector: 'app-root',
  template: `
        <h3>{{message}}</h3>
        <app-dynamic #ad></app-dynamic>
        <br>
        <input #name type="text" placeholder="name">
        <button (click)="ad.addNewName(name.value)">Add Name</button>
        <br>
        <input #age type="number" placeholder="age">
        <button (click)="ad.addNewAge(age.value)">Add Age</button>
    `,
})
export class AppComponent {
  message = 'this is app component';
  @ViewChild(DynamicComponentRenderer) dcr;

}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, DynamicComponentRenderer],
  bootstrap: [AppComponent]
})
export class AppModule {}`

Mam prosty przykład, aby pokazać, jak zrobić angular 2 RC6 dynamic component.

Powiedzmy, że masz dynamiczny szablon html = template1 i chcesz dynamicznie ładować, najpierw zawiń w komponent

@Component({template: template1})
class DynamicComponent {}

Tutaj template1 jako html, może zawierać komponent ng2

Z rc6, musi mieć @NgModule zawijać ten komponent. @NgModule, podobnie jak moduł w anglarJS 1, odsprzęga on inną część aplikacji ng2, więc:

@Component({
  template: template1,

})
class DynamicComponent {

}
@NgModule({
  imports: [BrowserModule,RouterModule],
  declarations: [DynamicComponent]
})
class DynamicModule { }

(tutaj import RouterModule jak w moim przykładzie tam czy niektóre komponenty trasy w moim html, jak widać później)

Teraz możesz skompilować DynamicModule jako: this.compiler.compileModuleAndAllComponentsAsync(DynamicModule).then( factory => factory.componentFactories.find(x => x.componentType === DynamicComponent))

I musimy umieścić powyżej w aplikacji.moudule.ts, aby go załadować, zobacz moją aplikację.moudle.ts. Aby uzyskać więcej i pełne szczegóły sprawdź: https://github.com/Longfld/DynamicalRouter/blob/master/app/MyRouterLink.ts i app.moudle.ts

I zobacz demo: http://plnkr.co/edit/1fdAYP5PAbiHdJfTKgWo?p=preview

W kątowej 7.x użyłem do tego elementów kątowych.

1. Install @ angular-elements npm i @ angular / elements-s

2. Utwórz usługę akcesoriów.

import { Injectable, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { IStringAnyMap } from 'src/app/core/models';
import { AppUserIconComponent } from 'src/app/shared';

const COMPONENTS = {
  'user-icon': AppUserIconComponent
};

@Injectable({
  providedIn: 'root'
})
export class DynamicComponentsService {
  constructor(private injector: Injector) {

  }

  public register(): void {
    Object.entries(COMPONENTS).forEach(([key, component]: [string, any]) => {
      const CustomElement = createCustomElement(component, { injector: this.injector });
      customElements.define(key, CustomElement);
    });
  }

  public create(tagName: string, data: IStringAnyMap = {}): HTMLElement {
    const customEl = document.createElement(tagName);

    Object.entries(data).forEach(([key, value]: [string, any]) => {
      customEl[key] = value;
    });

    return customEl;
  }
}

Zauważ, że niestandardowy znacznik elementu musi się różnić od selektora elementu kątowego. w AppUserIconComponent:

...
selector: app-user-icon
...

I w tym przypadku niestandardowa nazwa tagu użyłem "user-icon".

1. Następnie należy wywołać register w AppComponent:

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  constructor(   
    dynamicComponents: DynamicComponentsService,
  ) {
    dynamicComponents.register();
  }

}

1. a teraz w każdym miejsce Twojego kodu możesz użyć go w następujący sposób:

dynamicComponents.create('user-icon', {user:{...}});

Lub w ten sposób:

const html = `<div class="wrapper"><user-icon class="user-icon" user='${JSON.stringify(rec.user)}'></user-icon></div>`;

this.content = this.domSanitizer.bypassSecurityTrustHtml(html);

(w szablonie):

<div class="comment-item d-flex" [innerHTML]="content"></div>

Zauważ, że w drugim przypadku musisz przekazać obiekty z JSON.stringify, a następnie parse go ponownie. Nie mogę znaleźć lepszego rozwiązania.

Rozwiązano to w ostatecznej wersji Angular 2 po prostu za pomocą dyrektywy dynamicComponent z ng-dynamic.

Użycie:

<div *dynamicComponent="template; context: {text: text};"></div>

Gdzie szablon jest dynamicznym szablonem, a kontekst można ustawić na dowolny dynamiczny model danych, z którym chcesz powiązać szablon.

Chcę dodać kilka szczegółów na górze tego bardzo doskonałego postu przez Radim.

Wziąłem to rozwiązanie i trochę nad nim pracowałem i szybko napotkałem pewne ograniczenia. Po prostu je zarysuję, a następnie dam rozwiązanie tego.

• Po pierwsze nie byłem w stanie renderować dynamicznych detali wewnątrz Dynamic-detail (zasadniczo nest dynamic Ui wewnątrz siebie).
• następnym problemem było to, że chciałem renderować dynamiczny detal wewnątrz jedną z części, która była udostępniony w rozwiązaniu. To było nie jest to również możliwe w przypadku początkowego rozwiązania.
• wreszcie nie było możliwe użycie adresów URL szablonów w dynamicznych częściach, takich jak edytor łańcuchów.

Na podstawie tego postu zadałem kolejne pytanie, jak osiągnąć te ograniczenia, które można znaleźć tutaj:

Rekurencyjna dynamiczna kompilacja szablonów w angular2

Po prostu przedstawię odpowiedzi na te ograniczenia, jeśli napotkasz ten sam problem, co ja, ponieważ to sprawia, że rozwiązanie jest bardziej elastyczne. Byłoby wspaniale, aby początkowy plunker został zaktualizowany również o to.

Aby włączyć zagnieżdżanie dynamicznych detali wewnątrz siebie, musisz dodać DynamicModule.forRoot() w instrukcji import w typie .budowniczy.ts

protected createComponentModule (componentType: any) {
    @NgModule({
    imports: [
        PartsModule, 
        DynamicModule.forRoot() //this line here
    ],
    declarations: [
        componentType
    ],
    })
    class RuntimeComponentModule
    {
    }
    // a module for just this Type
    return RuntimeComponentModule;
}

Poza tym nie było możliwe użycie <dynamic-detail> wewnątrz jednej z części będących edytorem łańcuchów lub edytorem tekstu.

Aby to włączyć należy zmienić parts.module.ts i dynamic.module.ts

Wewnątrz parts.module.ts musisz dodać DynamicDetail w DYNAMIC_DIRECTIVES

export const DYNAMIC_DIRECTIVES = [
   forwardRef(() => StringEditor),
   forwardRef(() => TextEditor),
   DynamicDetail
];

Również w dynamic.module.ts będziesz musiał usunąć dynamicDetail, ponieważ są one teraz częścią części

@NgModule({
   imports:      [ PartsModule ],
   exports:      [ PartsModule],
})

Działający zmodyfikowany plunker można znaleźć tutaj: http://plnkr.co/edit/UYnQHF?p=preview (nie rozwiązałem tego problemu, jestem tylko posłańcem : - d)

Ostatecznie nie było możliwe użycie szablonów w częściach utworzonych na komponentach dynamicznych. Rozwiązanie (lub obejście. Nie jestem pewnie, czy to błąd kątowy, czy niewłaściwe użycie frameworka) było stworzenie kompilatora w konstruktorze zamiast wstrzykiwania go.

    private _compiler;

    constructor(protected compiler: RuntimeCompiler) {
        const compilerFactory : CompilerFactory =
        platformBrowserDynamic().injector.get(CompilerFactory);
        this._compiler = compilerFactory.createCompiler([]);
    }

Następnie użyj _compiler aby skompilować, następnie włączane są również szablony.

return new Promise((resolve) => {
        this._compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories) =>
            {
                let _ = window["_"];
                factory = _.find(moduleWithFactories.componentFactories, { componentType: type });

                this._cacheOfFactories[template] = factory;

                resolve(factory);
            });
    });

Mam nadzieję, że to pomoże komuś innemu!

Pozdrawiam Morten

Podążając za doskonałą odpowiedzią Radmina, jest trochę poprawek potrzebnych dla wszystkich, którzy używają angular-CLI w wersji 1.0.0-beta.22 i więcej.

COMPILER_PROVIDERSnie można już importować (szczegóły w angular-Cli GitHub ).

Więc obejście nie powinno w ogóle używać COMPILER_PROVIDERS i JitCompiler w sekcji providers, ale używać JitCompilerFactory z '@ angular / compiler ' zamiast tego w ten sposób wewnątrz klasy type builder:

private compiler: Compiler = new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();

Jak widać, nie jest wstrzykiwany i w związku z tym nie ma zależności od DI. To rozwiązanie powinno działać również w przypadku projektów nie korzystających z angular-cli.

Sam staram się zobaczyć jak mogę zaktualizować RC4 do RC5 i dlatego natknąłem się na ten wpis i nowe podejście do dynamicznego tworzenia komponentów nadal kryje dla mnie trochę tajemnicy, więc nie będę sugerował niczego na component factory resolver.

Ale mogę zasugerować nieco jaśniejsze podejście do tworzenia komponentów w tym scenariuszu - wystarczy użyć przełącznika w szablonie, który utworzy edytor tekstu lub edytor tekstu zgodnie z pewnym warunkiem, jak to:

<form [ngSwitch]="useTextarea">
    <string-editor *ngSwitchCase="false" propertyName="'code'" 
                 [entity]="entity"></string-editor>
    <text-editor *ngSwitchCase="true" propertyName="'code'" 
                 [entity]="entity"></text-editor>
</form>

I przy okazji, " ["w [prop] wyrażenie ma znaczenie, oznacza to jednokierunkowe powiązanie danych, dlatego możesz, a nawet powinieneś je pominąć w przypadku, gdy wiesz, że nie musisz wiązać właściwości ze zmienną.

Jest to przykład dynamicznej kontroli formularzy generowanej z serwera.

Https://stackblitz.com/edit/angular-t3mmg6

Ten przykład jest dynamiczny Form controls znajduje się w add component (tutaj można pobrać Formcontrols z serwera). Jeśli widzisz metodę addcomponent, możesz zobaczyć kontrolki formularzy. W tym przykładzie nie używam materiału kątowego, ale działa (używam @ work). Jest to cel do angular 6, ale działa we wszystkich poprzednich wersjach.

Need to dodaj JITComplierFactory dla AngularVersion 5 i nowszych.

Thanks

Vijay

Jeśli wszystko, czego potrzebujesz, aby przetworzyć dynamiczny ciąg znaków i załadować komponenty przez ich selektory, możesz również uznać bibliotekę ngx-dynamic-hooks za przydatną. Początkowo stworzyłem to jako część osobistego projektu, ale nie widziałem czegoś podobnego, więc trochę go dopracowałem i upubliczniłem.

Niektóre Ciekawostki:

• możesz załadować dowolne komponenty do dynamicznego ciągu za pomocą ich selektora (lub dowolnego innego wybranego wzoru!)
• wejścia i wyjścia mogą być tylko se jak w normalnym szablonie
• komponenty mogą być zagnieżdżane bez ograniczeń
• możesz przekazywać dane aktywne z komponentu nadrzędnego do dynamicznie ładowanych komponentów (a nawet używać ich do wiązania wejść/wyjść)
• możesz kontrolować, które komponenty mogą być ładowane w każdym wyjściu, a nawet jakie wejścia/wyjścia możesz im dać
• biblioteka używa wbudowanego Domsanitizer Angular, aby być bezpiecznym w użyciu nawet z potencjalnie niebezpiecznymi wejściami.

W szczególności, to robi nie polegaj na kompilatorze runtime, tak jak niektóre inne odpowiedzi tutaj. Z tego powodu nie można używać składni szablonu. Z drugiej strony oznacza to, że działa zarówno w trybach JiT, jak i AOT, a także zarówno Ivy, jak i stary silnik szablonów, a także jest znacznie bezpieczniejszy w użyciu w ogóle.

Zobacz go w akcji W tym Stackblitz .

W tym konkretnym przypadku lepiej byłoby użyć dyrektywy do dynamicznego tworzenia komponentu. Przykład:

W HTML, w którym chcesz utworzyć komponent

<ng-container dynamicComponentDirective [someConfig]="someConfig"></ng-container>

const components: {[type: string]: Type<YourConfig>} = {
    text : TextEditorComponent,
    numeric: NumericComponent,
    string: StringEditorComponent,
    date: DateComponent,
    ........
    .........
};

@Directive({
    selector: '[dynamicComponentDirective]'
})
export class DynamicComponentDirective implements YourConfig, OnChanges, OnInit {
    @Input() yourConfig: Define your config here //;
    component: ComponentRef<YourConfig>;

    constructor(
        private resolver: ComponentFactoryResolver,
        private container: ViewContainerRef
    ) {}

    ngOnChanges() {
        if (this.component) {
            this.component.instance.config = this.config;
            // config is your config, what evermeta data you want to pass to the component created.
        }
    }

    ngOnInit() {
        if (!components[this.config.type]) {
            const supportedTypes = Object.keys(components).join(', ');
            console.error(`Trying to use an unsupported type ${this.config.type} Supported types: ${supportedTypes}`);
        }

        const component = this.resolver.resolveComponentFactory<yourConfig>(components[this.config.type]);
        this.component = this.container.createComponent(component);
        this.component.instance.config = this.config;
    }
}

Więc w Twoich komponentach tekst, ciąg, data, cokolwiek - cokolwiek config przekazałeś w HTML w elemencie ng-container będzie dostępny.

Config, yourConfig, może być taki sam i definiować Twoje metadane.

W zależności od konfiguracji lub typu danych wejściowych dyrektywa powinna działać odpowiednio i z obsługiwanych typów renderuje odpowiedni komponent. Jeśli nie, zarejestruje błąd.

Jest to jedna z najbardziej znanych postaci w grze. Jedynym problemem jest to, że nie mogę wprowadzić żadnych usług do DynamicComponent, ale mogę z tym żyć.

Uwaga: nie testowałem z Angular 5.

import { Component, OnInit, Input, NgModule, NgModuleFactory, Compiler, EventEmitter, Output } from '@angular/core';
import { JitCompilerFactory } from '@angular/compiler';

export function createJitCompiler() {
  return new JitCompilerFactory([{
    useDebug: false,
    useJit: true
  }]).createCompiler();
}

type Bindings = {
  [key: string]: any;
};

@Component({
  selector: 'app-compile',
  template: `
    <div *ngIf="dynamicComponent && dynamicModule">
      <ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: dynamicModule;">
      </ng-container>
    </div>
  `,
  styleUrls: ['./compile.component.scss'],
  providers: [{provide: Compiler, useFactory: createJitCompiler}]
})
export class CompileComponent implements OnInit {

  public dynamicComponent: any;
  public dynamicModule: NgModuleFactory<any>;

  @Input()
  public bindings: Bindings = {};
  @Input()
  public template: string = '';

  constructor(private compiler: Compiler) { }

  public ngOnInit() {

    try {
      this.loadDynamicContent();
    } catch (err) {
      console.log('Error during template parsing: ', err);
    }

  }

  private loadDynamicContent(): void {

    this.dynamicComponent = this.createNewComponent(this.template, this.bindings);
    this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));

  }

  private createComponentModule(componentType: any): any {

    const runtimeComponentModule = NgModule({
      imports: [],
      declarations: [
        componentType
      ],
      entryComponents: [componentType]
    })(class RuntimeComponentModule { });

    return runtimeComponentModule;

  }

  private createNewComponent(template: string, bindings: Bindings): any {

    const dynamicComponent = Component({
      selector: 'app-dynamic-component',
      template: template
    })(class DynamicComponent implements OnInit {

      public bindings: Bindings;

      constructor() { }

      public ngOnInit() {
        this.bindings = bindings;
      }

    });

    return dynamicComponent;

  }

}