Angular2 decorators are not defined

2
votes

My project builds with webpack but when I host the app from localhost I get an error.

Uncaught ReferenceError: __decorate is not defined.

Initially i get the error with the Injectable() decorator. But when I uncomment that I get the same error but with extends.

Ive created a repo that duplicates the errors.
https://github.com/shawnrmoss/decorators

I suspect it has something to do with typings since the problem started when I had to change those definitions.
typings_orig.json has the original typings definitions

Im no sure what is going on. Hopefully someone can shine a light on this and help me out.

Thanks.

1
typescriptangulardecoratorwebpackinjectable
Could you give us more details about what you use? ES5, ES6, TypeScript? - Thierry Templier
Sure: angular 2 2.0.0.0-beta.0, typescript 1.7.5, es6 - smoss
Uncaught ReferenceError: decorate is not defined(anonymous function) @ auth.service.ts:6(anonymous function) @ auth.service.ts:87__webpack_require @ bootstrap 435ddfde67fa15c11a9e:50(anonymous function) @ main.ts:1__webpack_require__ @ bootstrap 435ddfde67fa15c11a9e:50webpackJsonpCallback @ bootstrap 435ddfde67fa15c11a9e:21(anonymous function) @ main.bundle.js:1 - smoss
Everything was working fine. Then I had a hard drive fail. Had to download the project from our repository and reinstall the node_modules. Since then I get this error - smoss
Thanks! Did you include the angular2-polyfills.js file? - Thierry Templier

1 Answers

-1
votes

I think you don't import include the Reflect-metadata library into your project. This library is provided by Angular thanks to the angular2-polyfills.js file. This library contains both ZoneJS and Reflect-metadata.

This library is used by decorators, specially the @Injectable one. They internally use the Reflect.decorate function.

From your comment, it seems that you only import es6-promise and zone-microtask...

I started with the angularclass starter kit. In the vendor ts file it has this // (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here) import 'es6-promise'; import 'zone.js/lib/browser/zone-microtask';

This article could help you and look for Reflect.decorate: