Angular 4 - Can't resolve all parameters for "MyService" when import a Decorator

[mfdeveloper]

This problem happens when I create a decorator with the makeDecorator() in a specific file, and annotate a Angular service/provider. I'm using latest angular 4 and reflect-helper 1.1.0

See my code snippet below:

my-decorator.ts

import { makeDecorator } from 'reflect-helper';

class MyDecoratorClass {
    constructor(public param: string) { }
}

//Create "MyDecorator" using "reflect-helper" here
export const MyDecorator = makeDecorator(MyDecoratorClass);

my-service.ts

import { MyDecorator } from 'my-decorator.ts';
import { Injectable } from '@angular/core';

@MyDecorator('test')
export class MyService {
    constructor(public param: string) { }
}

export const MyDecorator = makeDecorator(MyDecoratorClass);

my-module.ts

import { MyService } from 'my-service.ts';
import { NgModule } from '@angular/core';

@Injectable()
@NgModule({
   providers: [
        MyService // Here happens the problem (Can't resolve...)
  ]
})
export class MyService {
    constructor(public param: string) { }
}

export const MyDecorator = makeDecorator(MyDecoratorClass);

Can you help me? Maybe can be a conflict with Angular core makeDecorator() function. I was using this function before, but, in latest Angular versions, this function is only to INTERNAL use 😢

[mfdeveloper]

After some tests, I think this happens when execute: import 'reflect-metadata' explicitly in any .ts or .d.ts file in a Angular app.

I found this reflect-metadata import on this file https://github.com/artifacthealth/reflect-helper/blob/master/src/util.ts.

Can you confirm this problem?

[meirgottlieb]

Hey @mfdeveloper - The library wasn't really intended to be used with Angular injection. Angular has it's own helper functions for creating annotations. This library is for creating Angular-style annotations for use outside of Angular. For example, in a NodeJS application.

[mfdeveloper]

@meirgottlieb Thank you for your response. I understand now this approach of this library. But, I tried use this, because the Angular helper functions for create decorators with reflection, aren't accessible anymore. Is just to use in core Angular annotations now (e.g. like @Component, @Directive..) 😢

Do you have some suggestion or another alternative?

[meirgottlieb]

If you can put together and example project that gets the error, I'll take a look.

[mfdeveloper]

@meirgottlieb Sorry for my late response. I've created a new angular 4.1.3 project with angular-cli. I think that problem can be related with import 'reflect-metadata' and angular Http service.

To see the list of changed/created files, run:

git diff-tree --no-commit-id --name-only -r [COMMIT_HASH]

Or open this project with your favorite git GUI tool.

Example project: angular-reflect.zip

Running project

npm install -g @angular/cli
npm install
ng serve

Open the browser on: http://localhost:4200. The console shows: compiler.es5.js:1540 Uncaught Error: Can't resolve all parameters for OtherRestService: (?)