Implementing custom component decorator in Angular

post discussion
#1
#2

@m.koretskyi - can you speak to whether or not this technique should still work almost 4 years later in Angular 11?
I followed your steps quite closely, but it turns out thatReflect.getOwnMetadata(‘annotations’, c) comes back undefined - and I even found that Reflect.getMetadataKeys© and Reflect.getOwnMetadataKeys© come back as empty arrays.

Before I provide more detail, I figured I would ask if you happen to know off-the-bat that it no longer works.

Thanks!

#3

Most likely it has changed with Ivy.

#4

Well, for one thing, after a lot of hunting, I discovered that this setting needs to be applied in tsconfig.json:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
   }
}

That gets me closer - at least Reflect,getMetaDadata* functions will return something after using Reflect.defineMetadata(‘annotations’).

Still having difficulty getting anything out of a class decorated by the @Component decorator.

export const c = class c {};
Component({})(c);
const DecoratorFactory = Object.getPrototypeOf(Reflect.getOwnMetadata('annotations', c)[0]);

As a result, I can’t really trick it to use my @CustomComponent decorator in place of the standard @Component decorator
but there must be a way.

I will post a solution if I get to the bottom of this!

1 Like
#5

Good findings, let us know if you find the solution!