angular-cli does build project when using Reflect.getMetadata

[fkolar]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Mac Osx
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.10
   node: 6.0.0
   os: darwin x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

I created simple decorator in my component class

export function Test() {
    return function (target: Object, key: string) {
        var t = Reflect.getMetadata("design:type", target, key);
        console.log(`${key} type: ${t.name}`);

    }
}

When I try to compile this using angular cli
ng build --dev

I get following error :

 Property 'getMetadata' does not exist on type 'typeof Reflect'.

When I try to compile the TS file just using tsc, it work fine.

am I missing something in terms of configuring angular-cli for use of Reflect API?

[emilioyn]

Same problem here...

[fkolar]

To get around this I had to declare in my TS file a Reflect. then compilation passed ok. I jsut put this into my common file:

declare abstract class Reflect {
public static getMetadata(metadataKey:any, target:Object, targetKey:string | symbol):any;
public static getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
public static getOwnMetadata(metadataKey: any, target: Object): any;
public static defineMetadata(metadataKey: any, metadataValue: any, target: Object, targetKey?: string | symbol): void;
}

[emilioyn]

Is this declaration in the same file as your component?

How about runtime behavior?

[fkolar]

I have it now temporary inside environemt.ts. Regarding the runtime behavior all this declaration are properly hooked with correct implementation as you bring in reflection-meta

[emilioyn]

Very nice, I'm gonna try later and report my own experience on it.

I'm coming from Java/JSF technology and my goal now is to understand how Angular2/TS works and how can I implement some nice things I found in JSF such as composite, reusable components and so forth.

[emilioyn]

This is what I'm trying:

https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.c5pgjkdxj

[emilioyn]

Tried here... Added code snippet in environment.ts.

angular-cli is able to compile but:
1) WebStorm shows a compilation error (is there any change do I need to do?)
2) Decorator's filename is app.custom.decorator.ts but it is not being copied to dist/

* Update *
Added:
import "reflect-metadata";
On top of file and it compiles with ng build

But when I open browser a 404 for reflect-metadata is thrown

* Update *
Changed from import "reflect-metadata"; to import {} from "reflect-metadata";

Now it worked, no 404. Now I'm gonna test if inherited properties it's working

[emilioyn]

Did my test and realized that properties is not being merged. =( It seems Reflect is not bound to declaration during runtime.

Any ideas?

[filipesilva]

I think this is fixed in the webpack branch, since we changed the build process. I believe the problem before was that reflect was being loaded via a shim in index.html, and you were not importing it.

[william-lohan]

So what is the "proper" way of using Reflect.metadata in a cli project?
Import reflect-metadata when angular is using core-js or adding to typings.d.ts ect

[iliyaZelenko]

I was helped by the installation package for babel: @babel/preset-typescript.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}