Angular 2 (2.0.0 to 2.2.0~) getting error while adding custom decorator with the line "import 'reflect-metadata'"

Question

On my project base on gulp I was trying to implement a custom decorator for data validation but at a point I got stuck because of this error:

Error: Can't resolve all parameters for LoginService: (?, ?, ?).(…)

Or an error like this in other cases:

Unexpected value 'AppComponent' declared by the module 'AppModule'

Then I started to do some tests and I found out that line causing this error is:

import "reflect-metadata";

Here are two versions of the tour-of-heroes tutorial:

With the error caused by importing reflect-metadata.

And with the solution.

EDIT

I've edited the title by adding the versions of angular which i'm sure this fix works, from version 1.3.0 i'm having trouble using decorators and that's why i'm moving my project from gulp to webpack

Answer 1

After a day debugging angular and editing my code I found the solution to this issue only by adding another import on top of all other imports:

import "reflect-metadata";

to the class that is mentioned in the error even if the class isn't using any object of reflect-metadata:

e.g. If you are getting an error like these:

Error: Can't resolve all parameters for LoginService: (?, ?, ?).(…)

Or

Unexpected value 'AppComponent' declared by the module 'AppModule'

Add the import line to the classes LoginService and AppComponent to solve the issue.

Here is a working version on Plunker.

EDIT

I've edited the title by adding the versions of angular which i'm sure this fix works, from version 1.3.0 i'm having trouble using decorators and that's why i'm moving my project from gulp to webpack