angular6 - What is the purpose of providedIn with the Injectable decorator when generating Services in Angular 6?

Question

When generating services in the Angular CLI, it is adding extra metadata with a 'provided in' property with a default of 'root' for the Injectable decorator.

@Injectable({
  providedIn: 'root',
})

What exactly does providedIn do? I am assuming this is making the service available like a 'global' type singleton service for the whole application, however, wouldn't be cleaner to declare such services in the provider array of the AppModule?

UPDATE:

For anyone else, the following paragraph provided another good explanation of it also, in particular if you want to provide your service to only a feature module.

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." - https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/

UPDATE 2:

After further investigation, I have decided it is only useful to have providedIn: 'root'

If you want to provide a service in any module other than the root module, then you are better off using the providers array in the feature module's decorators, otherwise you will be plagued with circular dependencies. Interesting discussions to be had here - https://github.com/angular/angular-cli/issues/10170

Answer 1

providedIn: 'root' is the easiest and most efficient way to provide services since Angular 6:

1. The service will be available application wide as a singleton with no need to add it to a module's providers array (like Angular <= 5).
2. If the service is only used within a lazy loaded module it will be lazy loaded with that module
3. If it is never used it will not be contained in the build (tree shaked).

For further informations consider reading the documentation and NgModule FAQs

Btw:

1. If you don't want a application-wide singleton use the provider's array of a component instead.
2. If you want to limit the scope so no other developer will ever use your service outside of a particular module, use the providers array of NgModule instead.