Access Meta-Annotation inside Class (TypeScript)

Question

When I annotate a class with metadata in TypeScript, e.g. to create an Angular2 component, can I access the metadata inside that class?

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    templateUrl: '/app/components/app/app.component.html'
})
export class AppComponent {

    // can I access 'templateUrl' from above annotation here?

}

Answer 1

With the new angular version, you should use the native Reflect object. No IE11 support though:

const annotations = Reflect.getOwnPropertyDescriptor(MyModule, '__annotations__').value;

Read Jeff Fairley's answer below on what to do with the data after that

You can see an annotation/decorator as a normal function call. To this function the 'Class/Function' object (not instance) gets send in the first parameter, and the parameters (metadata) in the second argument.

However it depends on the implementation of that function if something gets added for instance to the prototype of the class (bad practice/exposing property). The TypeScript compiler and Angular2 do things differently though.

They use the __decorate and __metadata functions, which are generated by the TypeScript compiler. The data gets added with the Object.defineProperty() function. The package responsible for this is Reflect. (which under the hood uses the Object.defineProperty() function in combination with a WeakMap).

The function Reflect.defineMetadata() is used to set the annotations, and to obtain them the obvious Reflect.getMetadata().

TLDR;

• To get the annotations from a class/component in angular2, you have to use:

  Reflect.getMetadata('annotations', ComponentClass); //@Component({}), @Pipe({}), ...
  

• To get the annotations from the constructor paramaters in angular2, you have to use:

  Reflect.getMetadata('parameters', ComponentClass); //@Inject()
  

• To get the annotations from a property in a class in angular2, you have to use:

  Reflect.getMetadata('propMetadata', ComponentClass); //@HostBinding(), @Input(), ...
  

Answer 2

@PierreDuc's answer doesn't work for me in Angular 5. I did some further reading (sorry, I can't find all the relevant links to share), and came up with the following:

let decorator: Type<any>;
// you can cast the component class
decorator = (<any>AppComponent).__annotations__[0];
// or use with lodash.get
decorator = get(AppComponent, '__annotations__[0]');

//
// obviously, this is an array, and based on your app,
// you may have multiple decorators on one class, so iterate them
//


// if you want to just grab some data from the @Component:
const templateUrl: string = decorator.templateUrl;
// or from a @NgModule:
const declarations: Type<any>[] = decorator.declarations;


// or if you're trying to decide whether this is in fact a component:
if (decorator instanceof Component) {
  // do things
}
// or a provider
if (decorator instanceof Injectable) {
  // do different things
}
// or a module:
if (decorator instanceof NgModule) {
  // do things
}

// etc...

I have not yet upgraded my app to Angular 6, so I have not verified that this has not changed.

Related:

• Here's any interesting article about creating a custom decorator: https://blog.angularindepth.com/implementing-custom-component-decorator-in-angular-4d037d5a3f0d