What is the lifecycle of a service in Angular 5

Question

Angular 5

When is a service created and destroyed, what are its lifecycle hooks (if any) and how is its data shared between components?

EDIT: To clarify, this is NOT a question about the lifecycle of components. This question is about the lifecycle of services. In case a service does not have a lifecycle, how is the flow of data between components and services managed?

@ochs.tobi your comment is related to *component* lifecycles. I'm asking about service lifecycles — rahs, Apr 27 '18 at 06:29
@HiteshKansagara That link is about the lifecycle of a *component*. I'm asking about service lifecycles — rahs, Apr 27 '18 at 06:29
@RahulSaha I believe the services are created when the app.module is loaded — Aravind, Apr 27 '18 at 06:30

score 92 · Accepted Answer · edited Feb 02 '23 at 16:30

Services can have 2 scopes.

If a service is declared in your module, you have the same instance shared for all, this means the service will be constructed when the first component/directive/service/Pipe who needs it will be created. Then it will be destroyed when the Module itself will be destroyed (most of the time when the page is unloaded)

if the service is declared on Component/Directive/Pipe, then a separate instance will be created each time a Component/Directive/Pipe will be created and destroyed when related Component/Directive/Pipe will be destroyed.

You can see it in action

Code testing : 2 services are made for showing when they are created/destroyed.

@NgModule({
  providers: [GlobalService] // This means lifeCycle is related to the Module, and only one instance is created for the whole module. It will be created only when the first element who needs it will be created.
})
export class AppModule { }

The second service is a local component service and will be created for each hello-component instance created, and destroyed just before hello-component will be destroyed.

@Injectable()
export class LocalService implements OnDestroy{
  constructor() {
    console.log('localService is constructed');
  }

  ngOnDestroy() {
    console.log('localService is destroyed');
  }
}

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  providers: [LocalService]
})
export class HelloComponent implements OnInit, OnDestroy {
  @Input() name: string;

  constructor(private localService: LocalService, private globalService: GlobalService) {}

  ngOnInit(){
    console.log('hello component initialized');
  }

  ngOnDestroy() {
    console.log('hello component destroyed');
  }
}

As you can see, a Service in angular can have an OnDestroy life cycle hook.

How about the ones declared as providedIn: root ? I believe it’s not required to be declared in ngModule. — foo-baar, May 09 '20 at 03:16
@foo-baar it will work as you expect, have just take this way because i believe is not the responsibility of the service to declare it scope. It is totally primary base opinion, at the end of the day both are fine — Yanis-git, May 09 '20 at 07:13
Important notice - Modules are **never** destroyed unless manually done so; That means that its services are never destroyed either! To fix this issue you must first vote on angular issue https://github.com/angular/angular/issues/37095#issuecomment-854792361 — Akxe, Jun 04 '21 at 15:09

score 8 · Answer 2 · answered May 11 '21 at 01:51

OnDestroy is applicable for services as addressed in official document: https://angular.io/api/core/OnDestroy

Quote:

A lifecycle hook that is called when a directive, pipe, or service is destroyed. Use for any custom cleanup that needs to occur when the instance is destroyed.

What is the lifecycle of a service in Angular 5

2 Answers2

Linked