0

Based on this question i know it´s possible to extract the information which components are exported by a component. The next step should be to create an object

//our root app component
import {Component, NgModule, Type, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@NgModule({
})
export class FirstModule {}


@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

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

declare let Reflect: any;
function getAnnotations(typeOrFunc: Type<any>): any[]|null {
  // Prefer the direct API.
  if ((<any>typeOrFunc).annotations) {
    let annotations = (<any>typeOrFunc).annotations;
    if (typeof annotations === 'function' && annotations.annotations) {
      annotations = annotations.annotations;
    }
    return annotations;
  }

  // API of tsickle for lowering decorators to properties on the class.
  if ((<any>typeOrFunc).decorators) {
    return convertTsickleDecoratorIntoMetadata((<any>typeOrFunc).decorators);
  }

  // API for metadata created by invoking the decorators.
  if (Reflect && Reflect.getOwnMetadata) {
    return Reflect.getOwnMetadata('annotations', typeOrFunc);
  }
  return null;
}

function convertTsickleDecoratorIntoMetadata(decoratorInvocations: any[]): any[] {
  if (!decoratorInvocations) {
    return [];
  }
  return decoratorInvocations.map(decoratorInvocation => {
    const decoratorType = decoratorInvocation.type;
    const annotationCls = decoratorType.annotationCls;
    const annotationArgs = decoratorInvocation.args ? decoratorInvocation.args : [];
    return new annotationCls(...annotationArgs);
  });
}


const browserAnnotations = getAnnotations(BrowserModule);
const annotations = getAnnotations(AppModule);

console.log(browserAnnotations[0].exports);
console.log(annotations[0].exports);

The result is a function with the same name as the component.
But how is it possible to create a working component to use it e.g. in the routing of the app?

JohnDizzle
  • 1,268
  • 3
  • 24
  • 51

0 Answers0