piral-ng 1.0.0-pre.2296 → 1.0.0

package/src/module.ts

@@ -0,0 +1,163 @@
+import type { PiletApi } from 'piral-core';
+import type { BehaviorSubject } from 'rxjs';
+import type { NgOptions, ModuleInstanceResult } from './types';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  CUSTOM_ELEMENTS_SCHEMA,
+  NgModule,
+  NgZone,
+} from '@angular/core';
+import { teardown } from './startup';
+import { RoutingService } from './RoutingService';
+import { findComponents, getAnnotations } from './utils';
+import { SharedModule } from '../common';
+
+interface ModuleDefinition {
+  active: any;
+  module: any;
+  components: Array<any>;
+  opts: NgOptions;
+}
+
+const availableModules: Array<ModuleDefinition> = [];
+
+function instantiateModule(moduleDef: ModuleDefinition, piral: PiletApi) {
+  const { module, components } = moduleDef;
+  const imports = [BrowserModule, SharedModule, module];
+  const props = { current: undefined as BehaviorSubject<any> };
+  const providers = [
+    RoutingService,
+    { provide: 'Props', useFactory: () => props.current.value, deps: [] },
+    { provide: 'piral', useFactory: () => piral, deps: [] },
+  ];
+
+  @NgModule({
+    imports,
+    // @ts-ignore
+    entryComponents: components,
+    providers,
+  })
+  class BootstrapModule {
+    private appRef: ApplicationRef;
+    private refs: Array<[any, HTMLElement, ComponentRef<any>]> = [];
+
+    constructor(private resolver: ComponentFactoryResolver, private zone: NgZone, public routing: RoutingService) {}
+
+    ngDoBootstrap(appRef: ApplicationRef) {
+      this.appRef = appRef;
+    }
+
+    attach(component: any, node: HTMLElement, $props: BehaviorSubject<any>) {
+      const factory = this.resolver.resolveComponentFactory(component);
+      props.current = $props;
+
+      if (factory) {
+        const ref = this.zone.run(() => this.appRef.bootstrap<any>(factory, node));
+        const name = (ref.componentType as any)?.ɵcmp?.inputs?.Props;
+
+        if (typeof name === 'string') {
+          const sub = $props.subscribe((props) => {
+            ref.instance[name] = props;
+            ref.changeDetectorRef?.detectChanges();
+          });
+          ref.onDestroy(() => sub.unsubscribe());
+        }
+
+        this.refs.push([component, node, ref]);
+      }
+    }
+
+    detach(component: any, node: HTMLElement) {
+      for (let i = this.refs.length; i--; ) {
+        const [sourceComponent, sourceNode, ref] = this.refs[i];
+
+        if (sourceComponent === component && sourceNode === node) {
+          ref.destroy();
+          this.refs.splice(i, 1);
+        }
+      }
+
+      if (this.refs.length === 0) {
+        teardown(BootstrapModule);
+      }
+    }
+  }
+
+  return BootstrapModule;
+}
+
+export function activateModuleInstance(moduleDef: ModuleDefinition, piral: PiletApi): ModuleInstanceResult {
+  if (!moduleDef.active) {
+    moduleDef.active = instantiateModule(moduleDef, piral);
+  }
+
+  return [moduleDef.active, moduleDef.opts];
+}
+
+export function getModuleInstance(component: any, standalone: boolean, piral: PiletApi) {
+  const [moduleDef] = availableModules.filter((m) => m.components.includes(component));
+
+  if (moduleDef) {
+    return activateModuleInstance(moduleDef, piral);
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!standalone) {
+      console.warn(
+        'Component not found in all defined Angular modules. Make sure to define (using `defineNgModule`) a module with your component(s) referenced in the exports section of the `@NgModule` decorator.',
+        component,
+        piral.meta,
+      );
+    }
+  }
+
+  return undefined;
+}
+
+export function createModuleInstance(component: any, standalone: boolean, piral: PiletApi): ModuleInstanceResult {
+  const declarations = standalone ? [] : [component];
+  const importsDef = standalone ? [CommonModule, component] : [CommonModule];
+  const exportsDef = [component];
+  const schemasDef = [CUSTOM_ELEMENTS_SCHEMA];
+
+  @NgModule({
+    declarations,
+    imports: importsDef,
+    exports: exportsDef,
+    schemas: schemasDef,
+  })
+  class Module {}
+
+  defineModule(Module);
+  return getModuleInstance(component, standalone, piral);
+}
+
+export function findModule(module: any) {
+  return availableModules.find((m) => m.module === module);
+}
+
+export function defineModule(module: any, opts: NgOptions = undefined) {
+  const [annotation] = getAnnotations(module);
+
+  if (annotation) {
+    availableModules.push({
+      active: undefined,
+      components: findComponents(annotation.exports),
+      module,
+      opts,
+    });
+  } else if (typeof module === 'function') {
+    const state = {
+      current: undefined,
+    };
+
+    return (selector: string) => ({
+      component: { selector, module, opts, state },
+      type: 'ng' as const,
+    });
+  }
+}

package/src/queue.ts

@@ -1,6 +1,6 @@
 let queue = Promise.resolve();
 
-export function enqueue<T>(callback: () => Promise<T>) {
+export function enqueue<T>(callback: () => T | Promise<T>) {
   const next = queue.then(callback);
   queue = next.then(() => {});
   return next;

package/src/startup.ts

@@ -0,0 +1,148 @@
+import type { ComponentContext } from 'piral-core';
+import type { NgOptions } from './types';
+import {
+  createPlatformFactory,
+  enableProdMode,
+  NgModuleRef,
+  NgZone,
+  PlatformRef,
+  ɵALLOW_MULTIPLE_PLATFORMS as ALLOW_MULTIPLE_PLATFORMS,
+} from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
+import {
+  ɵplatformCoreDynamic as platformCoreDynamic,
+  ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS as INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+} from '@angular/platform-browser-dynamic';
+import { getId, getNgVersion } from './utils';
+
+function getVersionHandler(versions: Record<string, () => void>) {
+  const major = getNgVersion();
+  const version = `v${major}`;
+  return versions[version];
+}
+
+// Equivalent to platformBrowserDynamic, but with support for multiple platforms
+const customPlatformDynamicFactory = createPlatformFactory(platformCoreDynamic, 'piralDynamic', [
+  ...INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+  {
+    provide: ALLOW_MULTIPLE_PLATFORMS,
+    useValue: true,
+  },
+]);
+const runningModules: Array<[any, NgModuleInt, PlatformRef]> = [];
+
+function startNew(BootstrapModule: any, context: ComponentContext, ngOptions?: NgOptions) {
+  const path = context.publicPath || '/';
+  const platform = customPlatformDynamicFactory([
+    { provide: 'Context', useValue: context },
+    { provide: APP_BASE_HREF, useValue: path },
+  ]);
+  const id = getId();
+  const zoneIdentifier = `piral-ng:${id}`;
+
+  // This is a hack, since NgZone doesn't allow you to configure the property that identifies your zone.
+  // See:
+  // - https://github.com/PlaceMe-SAS/single-spa-angular-cli/issues/33
+  // - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L144
+  // - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L257
+  // @ts-ignore
+  NgZone.isInAngularZone = () => window.Zone.current._properties[zoneIdentifier] === true;
+
+  return platform
+    .bootstrapModule(BootstrapModule, ngOptions)
+    .catch((err) => console.log(err))
+    .then((instance: NgModuleInt) => {
+      if (instance) {
+        const zone = instance.injector.get(NgZone);
+        // @ts-ignore
+        const z = zone?._inner ?? zone?.inner;
+
+        if (z && '_properties' in z) {
+          z._properties[zoneIdentifier] = true;
+        }
+
+        runningModules.push([BootstrapModule, instance, platform]);
+      }
+
+      return instance;
+    });
+}
+
+export type NgModuleInt = NgModuleRef<any> & { _destroyed: boolean };
+
+export function teardown(BootstrapModule: any) {
+  const runningModuleIndex = runningModules.findIndex(([ref]) => ref === BootstrapModule);
+
+  if (runningModuleIndex !== -1) {
+    const [, , platform] = runningModules[runningModuleIndex];
+    runningModules.splice(runningModuleIndex, 1);
+
+    if (!platform.destroyed) {
+      platform.destroy();
+    }
+  }
+}
+
+export function startup(
+  BootstrapModule: any,
+  context: ComponentContext,
+  ngOptions?: NgOptions,
+): Promise<void | NgModuleInt> {
+  const runningModule = runningModules.find(([ref]) => ref === BootstrapModule);
+
+  if (runningModule) {
+    const [, instance, platform] = runningModule;
+
+    if (platform.destroyed) {
+      teardown(BootstrapModule);
+    } else {
+      return Promise.resolve(instance);
+    }
+  }
+
+  return startNew(BootstrapModule, context, ngOptions);
+}
+
+if (process.env.NODE_ENV === 'development') {
+  // May be used later for something useful. Right now only debugging output.
+  const versionHandlers = {
+    legacy() {
+      console.log('Running in legacy mode (Angular 2, Angular 4)');
+    },
+    outdated() {
+      console.log('Running in outdated mode (Angular 5-8)');
+    },
+    current() {
+      console.log('Running in current mode (Angular 9-15)');
+    },
+    next() {
+      console.log('Running in next mode (Angular 16)');
+    },
+    unknown() {
+      console.log('Running with an unknown version of Angular');
+    },
+  };
+  const versions = {
+    v2: versionHandlers.legacy,
+    v4: versionHandlers.legacy,
+    v5: versionHandlers.outdated,
+    v6: versionHandlers.outdated,
+    v7: versionHandlers.outdated,
+    v8: versionHandlers.outdated,
+    v9: versionHandlers.current,
+    v10: versionHandlers.current,
+    v11: versionHandlers.current,
+    v12: versionHandlers.current,
+    v13: versionHandlers.current,
+    v14: versionHandlers.current,
+    v15: versionHandlers.current,
+    v16: versionHandlers.next,
+  };
+
+  const handler = getVersionHandler(versions) || versionHandlers.unknown;
+  handler();
+}
+
+if (process.env.NODE_ENV === 'production') {
+  enableProdMode();
+}

package/src/types.ts

@@ -1,4 +1,6 @@
+import type { PlatformRef, NgModuleRef } from '@angular/core';
 import type { ForeignComponent } from 'piral-core';
+import type { Type } from '@angular/core';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletNgApi {}
@@ -8,11 +10,72 @@ declare module 'piral-core/lib/types/custom' {
   }
 }
 
+/**
+ * Options passed through to Angular `bootstrapModule`.
+ *
+ * Mainly to specify Noop Zone, but also includes compiler specific settings.
+ * See https://angular.io/api/core/PlatformRef#bootstrapModule for possible values.
+ */
+export type NgOptions = Parameters<PlatformRef['bootstrapModule']>[1];
+
+export type ModuleInstanceResult = [any, NgOptions];
+
+export type PrepareBootstrapResult = [...ModuleInstanceResult, any];
+
+export type NgModuleInt = NgModuleRef<any> & { _destroyed: boolean };
+
+/**
+ * Gives you the ability to use a component from a lazy loaded module.
+ */
+export interface NgComponentLoader {
+  /**
+   * Uses a component from a lazy loaded module.
+   * @param selector The selector defined for the component to load.
+   */
+  (selector: string): NgComponent;
+}
+
+export interface NgLazyType {
+  selector: string;
+  module: () => Promise<{ default: Type<any> }>;
+  opts: NgOptions;
+  state: any;
+}
+
+/**
+ * The lazy loading interface for retrieving Angular components.
+ */
+export interface LazyType<T> {
+  /**
+   * Callback to be invoked for lazy loading an Angular module or component.
+   */
+  (): Promise<{ default: Type<T> }>;
+}
+
+/**
+ * Represents the interface implemented by a module definer function.
+ */
+export interface NgModuleDefiner {
+  /**
+   * Defines the module to use when bootstrapping the Angular pilet.
+   * @param ngModule The module to use for running Angular.
+   * @param opts The options to pass when bootstrapping.
+   */
+  <T>(module: Type<T>, opts?: NgOptions): void;
+  /**
+   * Defines the module to lazy load for bootstrapping the Angular pilet.
+   * @param getModule The module lazy loader to use for running Angular.
+   * @param opts The options to pass when bootstrapping.
+   * @returns The module ID to be used to reference components.
+   */
+  <T>(getModule: LazyType<T>, opts?: NgOptions): NgComponentLoader;
+}
+
 export interface NgComponent {
   /**
    * The component root.
    */
-  component: any;
+  component: Type<any> | NgLazyType;
   /**
    * The type of the Angular component.
    */
@@ -24,11 +87,18 @@ export interface NgComponent {
  */
 export interface PiletNgApi {
   /**
-   * Wraps an Angular component for use in Piral.
+   * Defines the module to use when bootstrapping the Angular pilet.
+   */
+  defineNgModule: NgModuleDefiner;
+  /**
+   * Wraps an Angular component for use in Piral. Might reuse a previously
+   * defined module if the component was exported from it.
+   * Alternatively, a module might be passed in, where the first component
+   * of either the bootstrap or the entryComponents declaration is used.
    * @param component The component root.
    * @returns The Piral Ng component.
    */
-  fromNg(component: any): NgComponent;
+  fromNg<T>(component: Type<T>): NgComponent;
   /**
    * Angular component for displaying extensions of the given name.
    */

package/src/utils.ts

@@ -0,0 +1,69 @@
+import { VERSION, StaticProvider } from '@angular/core';
+
+export interface NgAnnotation {
+  _initial?: Array<StaticProvider>;
+  standalone?: boolean;
+  providers: Array<StaticProvider>;
+  imports: Array<any>;
+  exports: Array<any>;
+  declarations: Array<any>;
+  entryComponents: Array<any>;
+  bootstrap: any;
+  selector: string;
+}
+
+export function getId() {
+  return Math.random().toString(36);
+}
+
+export function getNgVersion() {
+  return VERSION.major || VERSION.full.split('.')[0];
+}
+
+export function getMinVersion() {
+  const major = getNgVersion();
+  return `${major}.0.0`;
+}
+
+export function getAnnotations(component: any): Array<NgAnnotation> {
+  let annotations = component?.__annotations__;
+
+  if (!annotations && typeof Reflect !== 'undefined' && 'getOwnMetadata' in Reflect) {
+    annotations = (Reflect as any).getOwnMetadata('annotations', component);
+  }
+
+  if (!annotations && typeof component.ɵcmp !== 'undefined') {
+    annotations = [{}];
+  }
+
+  if (!annotations && typeof component.ɵmod !== 'undefined') {
+    annotations = [component.ɵmod];
+  }
+
+  return annotations || [];
+}
+
+export function hasSelector(component: any, selector: string) {
+  const [annotation] = getAnnotations(component);
+  return annotation && annotation.selector === selector;
+}
+
+export function findComponents(exports: Array<any>): Array<any> {
+  const components = [];
+
+  if (Array.isArray(exports)) {
+    for (const ex of exports) {
+      const [annotation] = getAnnotations(ex);
+
+      if (annotation) {
+        if (annotation.exports) {
+          components.push(...findComponents(annotation.exports));
+        } else if (!annotation.imports || annotation.standalone) {
+          components.push(ex);
+        }
+      }
+    }
+  }
+
+  return components;
+}

package/convert.ts

@@ -1,16 +0,0 @@
-import type { HtmlComponent } from 'piral-core';
-import { createConverter } from './lib/converter';
-import { createExtension } from './lib/extension';
-
-const convert = createConverter();
-
-export interface NgConverter {
-  (...params: Parameters<typeof convert>): HtmlComponent<any>;
-}
-
-export const fromNg: NgConverter = (component) => ({
-  type: 'html',
-  component: convert(component),
-});
-
-export const createNgExtension = createExtension;

package/esm/extension.d.ts

@@ -1 +0,0 @@
-export declare function createExtension(rootName?: string, selector?: string): any;

package/esm/extension.js

@@ -1,41 +0,0 @@
-import { __decorate, __metadata, __param } from "tslib";
-import { Component, ElementRef, Input, Inject, enableProdMode } from '@angular/core';
-export function createExtension(rootName, selector) {
-    if (rootName === void 0) { rootName = 'slot'; }
-    if (selector === void 0) { selector = 'extension-component'; }
-    var template = "<" + rootName + "></" + rootName + ">";
-    var NgExtension = /** @class */ (function () {
-        function NgExtension(elRef, piral) {
-            this.elRef = elRef;
-            this.piral = piral;
-        }
-        NgExtension.prototype.ngAfterContentInit = function () {
-            this.piral.renderHtmlExtension(this.elRef.nativeElement, {
-                name: this.name,
-                params: this.params,
-            });
-        };
-        __decorate([
-            Input('name'),
-            __metadata("design:type", String)
-        ], NgExtension.prototype, "name", void 0);
-        __decorate([
-            Input('params'),
-            __metadata("design:type", Object)
-        ], NgExtension.prototype, "params", void 0);
-        NgExtension = __decorate([
-            Component({
-                selector: selector,
-                template: template,
-            }),
-            __param(1, Inject('piral')),
-            __metadata("design:paramtypes", [ElementRef, Object])
-        ], NgExtension);
-        return NgExtension;
-    }());
-    if (process.env.ENV === 'production') {
-        enableProdMode();
-    }
-    return NgExtension;
-}
-//# sourceMappingURL=extension.js.map

package/esm/extension.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAErF,MAAM,UAAU,eAAe,CAAC,QAAiB,EAAE,QAAgC;IAAnD,yBAAA,EAAA,iBAAiB;IAAE,yBAAA,EAAA,gCAAgC;IACjF,IAAM,QAAQ,GAAG,MAAI,QAAQ,WAAM,QAAQ,MAAG,CAAC;IAM/C;QAIE,qBAAoB,KAA8B,EAA2B,KAAU;YAAnE,UAAK,GAAL,KAAK,CAAyB;YAA2B,UAAK,GAAL,KAAK,CAAK;QAAG,CAAC;QAE3F,wCAAkB,GAAlB;YACE,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;gBACvD,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;QACL,CAAC;QAVc;YAAd,KAAK,CAAC,MAAM,CAAC;;iDAAqB;QAClB;YAAhB,KAAK,CAAC,QAAQ,CAAC;;mDAAuB;QAFnC,WAAW;YAJhB,SAAS,CAAC;gBACT,QAAQ,UAAA;gBACR,QAAQ,UAAA;aACT,CAAC;YAKqD,WAAA,MAAM,CAAC,OAAO,CAAC,CAAA;6CAAzC,UAAU;WAJjC,WAAW,CAYhB;QAAD,kBAAC;KAAA,AAZD,IAYC;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,YAAY,EAAE;QACpC,cAAc,EAAE,CAAC;KAClB;IAED,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/lib/extension.d.ts

@@ -1 +0,0 @@
-export declare function createExtension(rootName?: string, selector?: string): any;

package/lib/extension.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createExtension = void 0;
-var tslib_1 = require("tslib");
-var core_1 = require("@angular/core");
-function createExtension(rootName, selector) {
-    if (rootName === void 0) { rootName = 'slot'; }
-    if (selector === void 0) { selector = 'extension-component'; }
-    var template = "<" + rootName + "></" + rootName + ">";
-    var NgExtension = /** @class */ (function () {
-        function NgExtension(elRef, piral) {
-            this.elRef = elRef;
-            this.piral = piral;
-        }
-        NgExtension.prototype.ngAfterContentInit = function () {
-            this.piral.renderHtmlExtension(this.elRef.nativeElement, {
-                name: this.name,
-                params: this.params,
-            });
-        };
-        tslib_1.__decorate([
-            core_1.Input('name'),
-            tslib_1.__metadata("design:type", String)
-        ], NgExtension.prototype, "name", void 0);
-        tslib_1.__decorate([
-            core_1.Input('params'),
-            tslib_1.__metadata("design:type", Object)
-        ], NgExtension.prototype, "params", void 0);
-        NgExtension = tslib_1.__decorate([
-            core_1.Component({
-                selector: selector,
-                template: template,
-            }),
-            tslib_1.__param(1, core_1.Inject('piral')),
-            tslib_1.__metadata("design:paramtypes", [core_1.ElementRef, Object])
-        ], NgExtension);
-        return NgExtension;
-    }());
-    if (process.env.ENV === 'production') {
-        core_1.enableProdMode();
-    }
-    return NgExtension;
-}
-exports.createExtension = createExtension;
-//# sourceMappingURL=extension.js.map

package/lib/extension.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;;AAAA,sCAAqF;AAErF,SAAgB,eAAe,CAAC,QAAiB,EAAE,QAAgC;IAAnD,yBAAA,EAAA,iBAAiB;IAAE,yBAAA,EAAA,gCAAgC;IACjF,IAAM,QAAQ,GAAG,MAAI,QAAQ,WAAM,QAAQ,MAAG,CAAC;IAM/C;QAIE,qBAAoB,KAA8B,EAA2B,KAAU;YAAnE,UAAK,GAAL,KAAK,CAAyB;YAA2B,UAAK,GAAL,KAAK,CAAK;QAAG,CAAC;QAE3F,wCAAkB,GAAlB;YACE,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE;gBACvD,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;QACL,CAAC;QAVc;YAAd,YAAK,CAAC,MAAM,CAAC;;iDAAqB;QAClB;YAAhB,YAAK,CAAC,QAAQ,CAAC;;mDAAuB;QAFnC,WAAW;YAJhB,gBAAS,CAAC;gBACT,QAAQ,UAAA;gBACR,QAAQ,UAAA;aACT,CAAC;YAKqD,mBAAA,aAAM,CAAC,OAAO,CAAC,CAAA;qDAAzC,iBAAU;WAJjC,WAAW,CAYhB;QAAD,kBAAC;KAAA,AAZD,IAYC;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,YAAY,EAAE;QACpC,qBAAc,EAAE,CAAC;KAClB;IAED,OAAO,WAAW,CAAC;AACrB,CAAC;AA1BD,0CA0BC"}

package/src/extension.ts

@@ -1,29 +0,0 @@
-import { Component, ElementRef, Input, Inject, enableProdMode } from '@angular/core';
-
-export function createExtension(rootName = 'slot', selector = 'extension-component'): any {
-  const template = `<${rootName}></${rootName}>`;
-
-  @Component({
-    selector,
-    template,
-  })
-  class NgExtension {
-    @Input('name') public name: string;
-    @Input('params') public params: object;
-
-    constructor(private elRef: ElementRef<HTMLElement>, @Inject('piral') private piral: any) {}
-
-    ngAfterContentInit() {
-      this.piral.renderHtmlExtension(this.elRef.nativeElement, {
-        name: this.name,
-        params: this.params,
-      });
-    }
-  }
-
-  if (process.env.ENV === 'production') {
-    enableProdMode();
-  }
-
-  return NgExtension;
-}