Angular not building AOT production about examples HOT 14 OPEN

  @Component({
  	template: ``,
  })
  export class CustomComponent implements OnInit, OnDestroy
  {
  	@Input()
  	component: Type<Component>;

  	@Input()
  	props: Props;

  	constructor(
  		private vcr: ViewContainerRef,
  		private injector: Injector,
  		private factoryResolver: ComponentFactoryResolver)
  	{

  	}

  	ngOnInit(): void
  	{
  		const factory = this.factoryResolver.resolveComponentFactory(this.component);
  		const componentRef = factory.create(this.injector);
  		const props = this.props;

  		for (const key of Object.keys(props))
  		{
  			Object.defineProperty(componentRef.instance, key, {
  				get: function () { return props[key]; },
  				set: function (val) { props[key] = val; },
  			});
  		}

  		this.vcr.insert(componentRef.hostView);
  	}

  	ngOnDestroy(): void
  	{
  		this.vcr.detach(0);
  	}
  }

  import { Socket, IO, Input as ReteInput } from 'rete';
  import { Component, Input } from '@angular/core';
  import { SocketType } from 'rete-angular-render-plugin';

  @Component({
  	selector: 'ngx-rete-socket',
  	template: `<div
  			*ngIf="socket" class="socket" [ngClass]="[type, socket.name, extraClass]" [title]="socket.name"></div>`,
  	styles: [`
  		:host{display:inline-block}.socket{display:inline-block;cursor:pointer;border:1px solid #fff;border-radius:12px;width:24px;height:24px;margin:6px;vertical-align:middle;background:#96b38a;z-index:2;box-sizing:border-box}.socket:hover{border-width:4px}.socket.multiple{border-color:#ff0}
  	`],
  })
  export class SocketComponent
  {
  	@Input()
  	socket: Socket;

  	@Input()
  	io: IO;

  	@Input()
  	extraClass: string;

  	readonly type: SocketType;

  	constructor()
  	{
  		Object.defineProperty(SocketComponent.prototype, 'type', {
  			get: () => this.io instanceof ReteInput ? 'input' : 'output',
  			enumerable: true,
  			configurable: true,
  		});
  	}
  }

  import { Directive, ElementRef, Input, OnInit } from '@angular/core';
  import { Input as ReteInput, IO } from 'rete';
  import { NodeService, SocketType } from 'rete-angular-render-plugin';

  @Directive({ selector: '[ngxReteSocket]'})
  export class SocketDirective implements OnInit
  {
  	@Input()
  	io: IO;

  	@Input()
  	extraClass: string;

  	readonly type: SocketType;

  	constructor(private el: ElementRef, private service: NodeService)
  	{
  		Object.defineProperty(SocketDirective.prototype, 'type', {
  			get: () => this.io instanceof ReteInput ? 'input' : 'output',
  			enumerable: true,
  			configurable: true,
  		});
  	}

  	ngOnInit(): void
  	{
  		this.service.bindSocket(this.el.nativeElement, this.type, this.io);
  	}
  }

  import { Directive, ElementRef, Input, OnInit } from '@angular/core';
  import { Control } from 'rete';
  import { NodeService } from 'rete-angular-render-plugin';

  @Directive({ selector: '[ngxReteControl]' })
  export class ControlDirective implements OnInit
  {
  	@Input('ngxReteControl')
  	control: Control;

  	constructor(private el: ElementRef, private service: NodeService) { }

  	ngOnInit(): void
  	{
  		this.service.bindControl(this.el.nativeElement, this.control);
  	}
  }

  import { Pipe, PipeTransform } from '@angular/core';

  declare type ClassAttr = string | string[];

  @Pipe({ name: 'ngxKebab' })
  export class KebabPipe implements PipeTransform
  {
  	replace(s: string): string {
  		return s.toLowerCase().replace(/ /g, '-');
  	}

  	transform(value: ClassAttr): ClassAttr
  	{
  		return Array.isArray(value) ? value.map((s) => this.replace(s) ) : this.replace(value);
  	}
  }

  import { NgModule, Injector } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { createCustomElement } from '@angular/elements';

  import { CustomComponent } from '@app-core/libraries/rete/custom.component';

  @NgModule({
  	declarations: [
  		CustomComponent,
  		SocketComponent,
  		SocketDirective,
  		KebabPipe,
  		ControlDirective,
  	],
  	imports: [
  		CommonModule,
  	],
  	providers: [
  		KebabPipe,
  		ControlDirective,
  	],
  	exports: [
  		CustomComponent,
  		SocketComponent,
  		SocketDirective,
  		KebabPipe,
  		ControlDirective,
  	],
  	entryComponents: [
  		SocketComponent,
  		CustomComponent,
  	],
  })
  export class ReteModule
  {
  	constructor(injector: Injector)
  	{
  		const CustomElement = createCustomElement(CustomComponent, { injector: injector });
  		if (!customElements.get('rete-element')) customElements.define('rete-element', CustomElement);
  	}
  }