Angular-cli: Uncaught reflect-metadata shim is required when using class decorators

[cmermingas]

OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
El Capitan

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.11-webpack.2
node: 4.4.2
os: darwin x64

Repro steps. Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

1. Start a project with Angular CLI (Webpack)
2. Create a standalone class (e.g. a model) with an EventEmitter property.
3. When new EventEmitter<...>() is called in that class, this error shows on the browser console.

_Uncaught reflect-metadata shim is required when using class decorators_

The log given by the failure. Normally this include a stack trace and some more information.

All I see is:

_Uncaught reflect-metadata shim is required when using class decorators / output_ast.js:334_

Mention any other details that might be useful.

This works fine in a non-webpack setting, like here:

http://plnkr.co/edit/255WLWdkSnZdMfNvCk3I?p=preview

That Plunkr works and shows what I am trying to do. The problem is when I do this exact same thing when using Webpack.

Also, EventEmitter works just fine if used in a component.

I am not sure whether this is a bug or user error. Please apologize me if it's the latter.

Thanks in advance!

[cmermingas]

The same error happens when I try to inject a class (e.g. a service) into a class that's not a component, as documented here.

let injector = ReflectiveInjector.resolveAndCreate([GameService]);
let gameService = injector.get(GameService);

_Uncaught reflect-metadata shim is required when using class decorators_

[griga]

I had the same issue when i've migrated to angular-cli's github master branch from npm version

while doing ng init to update angular-cli generated files, i've missed
import "./polyfills.ts";
on top of main.ts file

adding this line fixed my problem

[filipesilva]

@cmermingas can you confirm you are using the polyfills?

[cmermingas]

@filipesilva - Certainly. How would I check? And are the polyfills meant to be set up by cli or manually by me after ng new?

[filipesilva]

It should just be there after ng new without needing you to do anything. I re-read your issue and see you mention ng new as a repro, which I missed before.

Is it possible for you to give me some code that I can copy and paste to experience this and try to debug? Or maybe a repo if it's easier. I'm sorry if it seems a hassle but it's just much easier to debug issues with very explicit repro steps.

[cmermingas]

Absolutely. I'll put something together and upload the repo here this week.

[cmermingas]

@filipesilva - So, I created a simple project from scratch and it works, which is great!

I realized that the problem is happening when there is a Web Worker involved. Check out this repo:

https://github.com/cmermingas/cli_issue_1759

The constructor in my-class.ts has the code that I originally thought to be the problem. Now I suspect the problem is the Web Worker in app.component. I realize that this is not the Angular 2 way of doing Web Workers. Any good resources you'd recommend to use Web Workers in Angular 2?

Anyway, check it out and see if this is something you want to address, even if it's just in documentation.

[filipesilva]

I don't have a good resource on that, no. I know https://mobile.angular.io/ had some information on it, but we now have the --mobile flag disabled so I don't think it applies.

I'd ask that question in https://github.com/angular/angular, I think that's where you can get a good answer.

I'm closing this since the main problem itself seems to be solved, but feel free to open a new one specifically about Web Workers. A clean, specific issue is easier to get some community help as well, so that's good.

[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._}