CODEWITHSUNDEEP
serviceangular
Dabolo
Dabolo

Reputation: 9

"...decorated with Injectable" - Angular2

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: https://i.sstatic.net/2b1MQ.jpg

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.

Upvotes: 1

Views: 1821

Answers (2)

Thierry Templier
Thierry Templier

Reputation: 202138

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.

Upvotes: 0

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657108

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) {}
}

Upvotes: 1

Related Questions