“…decorated with Injectable” - Angular2

Question

I'm learning the new framework Angular2 from Google through those videos tutorials on Youtube : https://www.youtube.com/watch?v=SEM6-TkuOgo

I encounter different kind of errors when I started to learn about Services such as:

EXCEPTION: Cannot resolve all parameters for 'ContactListComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ContactListComponent' is decorated with Injectable.

EXCEPTION: Error: Uncaught (in promise): Cannot resolve all parameters for 'ContactListComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ContactListComponent' is decorated with Injectable.

angular2-polyfills.js:469 Unhandled Promise rejection: Cannot resolve all parameters for 'ContactListComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ContactListComponent' is decorated with Injectable. ; Zone: angular ; Task: Promise.then ; Value:

NoAnnotationError {message: "Cannot resolve all parameters for 'ContactListComp…ntactListComponent' is decorated with Injectable.", stack: "Error: Cannot resolve all parameters for 'ContactL…node_modules/angular2/bundles/angular2.js:477:94)"} message : "Cannot resolve all parameters for 'ContactListComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ContactListComponent' is decorated with Injectable." stack : "Error: Cannot resolve all parameters for 'ContactListComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ContactListComponent' is decorated/

angular2-polyfills.js:471 Error: Uncaught (in promise): Cannot resolve all parameters for 'ContactListComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ContactListComponent' is decorated with Injectable.(…)

angular2-polyfills.js:469 Unhandled Promise rejection: Cannot resolve all parameters for 'ContactListComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ContactListComponent' is decorated with Injectable. ; Zone: ; Task: Promise.then ; Value: NoAnnotationError {message: "Cannot resolve all parameters for 'ContactListComp…ntactListComponent' is decorated with Injectable.", stack: "Error: Cannot resolve all parameters for 'ContactL…node_modules/angular2/bundles/angular2.js:477:94)"}

angular2-polyfills.js:471 Error: Uncaught (in promise): Cannot resolve all parameters for 'ContactListComponent'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ContactListComponent' is decorated with Injectable.(…)

I don't understand what the console really means I tried to comment some part of the code to test to check when my code compile or not.

If feel that the problem might be around this part in the contact-list.component.ts:

constructor(private _contactService: ContactService) {}

And this one too in the contact.service.ts:

return Promise.resolve(CONTACTS);

I took screenshot of the different TypeScript files in the project: http://imgur.com/a/mqb5P

If someone has some clue to debug this code I'm all ears! :)

PS: I can copy/paste the code from the screenshot if this might help.

Answer 1

If you have a component ContactListComponent like

export class ContactListComponent {
  constructor(private contactService:ContactService) {}
}

and a service like

export class ContactService {
  constructor(private someDep:SomeDependency) {}
}

then the ContactService class needs to have an @Injectable() decorator like

@Injectable()
export class ContactService {
  constructor(private someDep:SomeDependency) {}
}

Answer 2

Most of time such problem is because the import for the type specified in constructor parameters is mission or wrong.

Do you import the "ContactService" type in your component.list.ts file?

Something like this:

import { ContactService } from './contact.service';

Angular2 is responsible to find out which types of instances you want to inject into the constructor. With TypeScript, it's done using the types of parameters you specify but they need to be imported previously into your module.

Dependency injection is done using a decorator: @Injectable for simple classes and by @Component / @Directive for components / directives. But you need a decorator.