Angular2 - Compile Error with Decorators

Hi I’m using Meteor Angular2. Got error during compile. Look at the error message it looks like I’m getting trouble on all the metadatas like @Input, @ViewChild because I’ve got same error from the other file as well. One with Input and one with ViewChild.

Struggling now. Many thanks in advance.

Error message.

W20170208-22:31:38.628(11)? (STDERR) C:\Users\mmo\AppData\Local\.meteor\packages\meteor-tool\1.4.2_3\mt-os.windows.x86_32\dev_bundle\server-lib\node_modules\fibers\future.js:280
W20170208-22:31:38.628(11)? (STDERR)                                            throw(ex);
W20170208-22:31:38.629(11)? (STDERR)                                            ^
W20170208-22:31:38.629(11)? (STDERR) 
W20170208-22:31:38.630(11)? (STDERR) TypeError: Cannot read property 'getOwnMetadata' of undefined
W20170208-22:31:38.630(11)? (STDERR)     at PropDecorator (D:\meteor\socially\node_modules\@angular\core\bundles\core.umd.js:463:52)
W20170208-22:31:38.631(11)? (STDERR)     at __decorate (C:\Users\mmo\AppData\Local\.meteor\packages\barbatus_typescript-runtime\1.0.0\npm\node_modules\tslib\tslib.js:63:114)
W20170208-22:31:38.631(11)? (STDERR)     at meteorInstall.@hive.directives.autofit.directive.js (@hive/directives/autofit.directive.ts:7:23)
W20170208-22:31:38.631(11)? (STDERR)     at fileEvaluate (packages\modules-runtime.js:181:9)
W20170208-22:31:38.631(11)? (STDERR)     at require (packages\modules-runtime.js:106:16)
W20170208-22:31:38.631(11)? (STDERR)     at server/main.ts:4:22
W20170208-22:31:38.632(11)? (STDERR)     at D:\meteor\socially\.meteor\local\build\programs\server\boot.js:295:34
W20170208-22:31:38.632(11)? (STDERR)     at Array.forEach (native)
W20170208-22:31:38.632(11)? (STDERR)     at Function._.each._.forEach (C:\Users\mmo\AppData\Local\.meteor\packages\meteor-tool\1.4.2_3\mt-os.windows.x86_32\dev_bundle\server-lib\node_modules\underscore\underscore.js:79:11)
W20170208-22:31:38.632(11)? (STDERR)     at D:\meteor\socially\.meteor\local\build\programs\server\boot.js:128:5
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.

By putting @ in different files, now I’ve got more specific error.

reflect-metadata shim is required when using class decorators

i think that last error message tells you the root of the problem. Use of ECMAScript decorators currently requires the reflect-metadata shim. If you are using angular-meteor, you should have import "angular2-meteor-polyfills"; as the first entry in your client/main.ts. That import includes among others the reflect-metadata import.

I’m using AngularJS 2 dependency injection on the server side and so had to manually add in import 'reflect-metadata'; as the first import in server/main.ts to get the same shim running in Node to allow use of ECMAScript decorators on my server-side code.

It seems like the decorators only allowed in client/imports folder. I’ll do some more testings. Even just under client folder doesn’t work & with the KeithGillette’s suggestion with the import, it doesn’t work neither.

Are you importing reflect-metadata before attempting to use decorators? Post some code samples if you can’t resolve the error.

I think it really doesn’t need code here. I used the official bootstrap boil plate.

meteor create --example angular2-boilerplate myApp

But the commandline indicates to use git instead. So I used git. Everything goes fine but when I tried to use decorators different errors appears when played with different folders. I ended up have to put these files under imports folder no matter where this ‘imports’ folder locates. Is this the normal design or I’ve done something wrong?

By the way, I’ve tried to put import ‘reflect-metadata’; in both server/main.ts & client/main.ts.

Ah, got it. Meteor is transitioning from its by-convention module loading to standard ECMAScript modules. For now, you can only control load order via import by placing your files in a directory called imports. I suspect it’s a load order issue. Per the meteor modules documentation, the recommendation is to put all of your code under imports.

Got it. Thanks!

Also find out even with app.ts(which is located under the imports folder) we cannot put decorators like @Input for main.ts(which is located at the client root folder) to pass a value.