Is `providers: [ MyService ]` the same as `providers: [{ provide: MyComponent, useClass: MyComponent }]`

Question

I'm reading the ng-book on angular 2 revision 47 page 250 and there is the following passage:

When we put the class itself into the list of providers like this:
providers: [ MyService ] 
That is telling Angular that we want to provide a singleton instance of MyService whenever MyService is injected. Because this pattern is so common, the class by itself is shorthand notation for the following, equivalent configuration:
providers: [
    { provide: MyComponent, useClass: MyComponent }
]

Is it a typo and what is meant should be:

providers: [
    { provide: MyService, useClass: MyService }
]

score 2 · Answer 1 · answered Jan 12 '17 at 14:24

2

Yes, it's the same. When the type passed to provide and useClass is the same, then it's equivalent to just pass the type.

Just a hint. Providing a component (MyComponent) usually doesn't make sense.

answered Jan 12 '17 at 14:24

Günter Zöchbauer

623,577
216
2,003
1,567

so it's most likely a typo? – Max Koretskyi Jan 12 '17 at 14:25
Ok, now I get what you mean. Yes, I'm sure `MyComponent` instead of `MyService` is a typo. – Günter Zöchbauer Jan 12 '17 at 14:26
ok, thanks, just wanted to make sure I'm not missing something else – Max Koretskyi Jan 12 '17 at 14:27

score 2 · Accepted Answer · answered Jan 12 '17 at 14:30

It's typo, since you can't use components as Providers, here's the official docs

The Provider class and provide object literal We wrote the providers array like this:
providers: [Logger]
This is actually a shorthand expression for a provider registration using a provider object literal with two properties:
[{ provide: Logger, useClass: Logger }]
The first is the token that serves as the key for both locating a dependency value and registering the provider.

The second is a provider definition object, which we can think of as a recipe for creating the dependency value. There are many ways to create dependency values ... and many ways to write a recipe

score 0 · Answer 3 · answered Jul 15 '21 at 02:20

Yes, both of them are same. When you write providers: [MyService] angular will expand this into [{ provide: MyService, useClass: MyService}] where the first parameter provide: MyService will work as a Dependency injection token that will work as a key to locate "MyService" and the second parameter useClass: MyService it will create dependency from the existing service class MyService

Is `providers: [ MyService ]` the same as `providers: [{ provide: MyComponent, useClass: MyComponent }]`

3 Answers3