Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular injectable.providedIn vs module.providers [duplicate]

In the latest release of Angular 6, a service is registered in a module using the providedIn property in the service metadata:

@Injectable({
  providedIn: 'root',
})
export class HeroService {}

However the documentation still also refers to registering the service in the module providers array in the module metadata just like we did in Angular 5:

@NgModule({
  providers: [HeroService],
})
export class AppModule {}

So,

  • Which method should be used to make the injector aware of the service that it should inject?
  • Will the module providers array method be deprecated?
like image 305
Hamed Baatour Avatar asked May 07 '18 06:05

Hamed Baatour


People also ask

What is the difference between providedIn and providers in Angular?

providedIn is the new Angular way of doing DI. providedIn was brought since Angular 6. The official name is "Tree-shakeable providers" - instead of module providing all its services, it is now the service itself declaring where it should be provided.

What is the difference between providedIn option and providers array?

As explained above, the main difference is that between the two methods, providedIn supports tree-shaking, and providers array does not.

What is providedIn in injectable Angular?

The providedIn allow us to specify how Angular should provide the dependency in the service class itself instead of in the Angular Module. It also helps to make the service tree shakable i.e. remove the service from the final bundle if the app does not use it.

When you should use any option of providedIn?

ProvidedIn: any That means there might be multiple instances of the same service. That means that every lazy loaded module has it's own instance of the service. All eagerly loaded modules share one instance provided by the root module injector.


3 Answers

Basically you can use either, But as per new CLI provideIn will be automatically added while creating service

#providedIn

There is now a new, recommended, way to register a provider, directly inside the @Injectable() decorator, using the new providedIn attribute. It accepts 'root' as a value or any module of your application. When you use 'root', your injectable will be registered as a singleton in the application, and you don’t need to add it to the providers of the root module. Similarly, if you use providedIn: UsersModule, the injectable is registered as a provider of the UsersModule without adding it to the providers of the module.

This new way has been introduced to have a better tree-shaking in the application. Currently a service added to the providers of a module will end up in the final bundle, even if it is not used in the application, which is a bit sad.

For more information please refer here

  • https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/
  • https://angular.io/guide/dependency-injection#injectable-ngmodule-or-component
  • https://angular.io/guide/hierarchical-dependency-injection#moduleinjector [As suggested by Tuan-Tu in comment below]
like image 57
Pardeep Jain Avatar answered Sep 27 '22 20:09

Pardeep Jain


As always when multiple solutions are available it depends on what you want to achieve. But the documentation gives you some directive to choose.

Sometimes it's not desirable to have a service always be provided in the application root injector. Perhaps users should explicitly opt-in to using the service, or the service should be provided in a lazily-loaded context. In this case, the provider should be associated with a specific @NgModule class, and will be used by whichever injector includes that module.

So basically you will use providedIn: 'root' for any services that are application wide. For other services keep using the old version.

Don't forget that on you already had the choice to provide service differently. For instance it's also possible to declare Injectable at component level (this doesn't change in V6).

  @Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    providers: [ MyService ]
  })

This way the service becomes available only in MyComponent and its sub-component tree.

like image 40
JEY Avatar answered Sep 27 '22 20:09

JEY


If You are using angular 5+ developer, it will automatically create the injectable service when declared as providedIn: 'root', in this case you will not required to import the service in app.module.ts. You can directly use it in another component.

like image 31
Prashant Avatar answered Sep 27 '22 19:09

Prashant