Search code examples
angularangular-ssr

Angular 17 - Does subscribing to FormControl's valueChanges need an unsubscribe?

The answers in this topic are older than 7 years. Is it state of the art that I need unsubscribe FormControl subscription from ReactiveFormsModule?

formControl = new FormControl("default", {nonNullable: true});

ngOnInit(){
  this.formControl.valueChanges.subscribe(value => {
    ...
  });   
}

Using takeUntilDestroyed in a ssr-project, then it throws some build errors:

⠹ Building...
ERROR _ [Error]: NG0203
    at sl (file:///project/path/.angular/prerender-root/81fd9210-872c-4b96-8341-24ec7fdb69e6/chunk-NL545L5S.mjs:7:13224)
    at Li (file:///project/path/.angular/prerender-root/81fd9210-872c-4b96-8341-24ec7fdb69e6/chunk-QXK5UEHF.mjs:5:110180)
    at e.ngOnInit (file:///project/path/.angular/prerender-root/81fd9210-872c-4b96-8341-24ec7fdb69e6/chunk-QXK5UEHF.mjs:5:112025)
    ...
    at Vd (file:///project/path/.angular/prerender-root/81fd9210-872c-4b96-8341-24ec7fdb69e6/chunk-NL545L5S.mjs:7:58146) {
  code: -203
⠙ Building...
ERROR _ [Error]: NG0203
    at sl (file:///project/path/.angular/prerender-root/6a2048f8-a61c-4e69-8230-6585a5b96a65/chunk-NL545L5S.mjs:7:13224)
    at Li (file:///project/path/.angular/prerender-root/6a2048f8-a61c-4e69-8230-6585a5b96a65/chunk-QXK5UEHF.mjs:5:110180)
    at e.ngOnInit (file:///project/path/.angular/prerender-root/6a2048f8-a61c-4e69-8230-6585a5b96a65/chunk-QXK5UEHF.mjs:5:112025)
    ...
  code: -203
⠙ Building...
ERROR _ [Error]: NG0203
    at sl (file:///project/path/.angular/prerender-root/05e20dd1-bcbb-410a-8229-f5c7e6bd5445/chunk-NL545L5S.mjs:7:13224)
    ...    
  code: -203
⠼ Building...
ERROR _ [Error]: NG0203
    at sl (file:///project/path/.angular/prerender-root/071e7b24-587d-43a7-bab9-26fa2afede39/chunk-NL545L5S.mjs:7:13224)
    ...
  code: -203

Can I ignore them because the build is not interrupted and the result is executable?

Solution

  • Quick answer:

    YES, cause it is an infinite observable

    Here is a good article for an in-depth explanation: FINITE vs INFINITE observables

    Explanation:

    So the question boils down to Finite vs Infinite observables:

    If you don't know when it is to stop emitting values in the foreseeable future of component lifecycle then it should be unsubscribed in the OnDestroy hook to prevent memory leaks

    eg: fromEvent(document, 'click') or valueChange from formControl in your case

    But if you think that observable is gonna emit a specific set of values ( Finite observable ), then:

    1. If there is a chance that the component might get destroyed before the observable emits all of its values then adding an unsub logic should be considered.

      eg: fromEvent(document, 'click') or valueChange from formControl in your case

    2. If it's sure that the observable will emit all of its values before the component is destroyed, we don't need to worry about unsubscribing it

      eg: httpClient or of([1,2,3]), both are gonna emit specific set of values and complete