Angular 17：订阅FormControl的valueChanges需取消吗？SSR用takeUntilDestroyed报错

一、是否需要取消FormControl的订阅？ #

在Angular当前版本（v14+）的最佳实践中，建议主动取消组件内FormControl的valueChanges订阅。

虽然Angular会在组件销毁时自动清理部分FormControl相关订阅，但在路由频繁切换、组件多次实例化的场景下，未手动取消的订阅可能导致内存泄漏，甚至出现组件销毁后回调仍被触发的异常情况。

推荐的取消订阅方式 #

方式1：使用takeUntilDestroyed（Angular v16+官方推荐）

无需手动管理销毁信号，依赖DestroyRef自动监听组件生命周期：

import { Component, OnInit, inject, DestroyRef } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  formControl = new FormControl("default", {nonNullable: true});
  private destroyRef = inject(DestroyRef);

  ngOnInit(){
    this.formControl.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(value => {
        // 业务逻辑处理
      });   
  }
}

方式2：使用takeUntil结合ngOnDestroy（适用于v16以下版本）

手动创建销毁信号，在组件销毁时触发：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit, OnDestroy {
  formControl = new FormControl("default", {nonNullable: true});
  private destroy$ = new Subject<void>();

  ngOnInit(){
    this.formControl.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => {
        // 业务逻辑处理
      });   
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

二、SSR项目中takeUntilDestroyed引发的NG0203错误 #

错误本质 #

NG0203错误通常是因为服务端渲染过程中，代码尝试访问了仅浏览器环境可用的API或存在生命周期上下文异常。takeUntilDestroyed在SSR场景下若配置不当，会因服务端缺乏浏览器端的组件销毁上下文而触发错误。

能否忽略？ #

不建议忽略。虽然当前构建未中断且运行正常，但这是潜在的不稳定因素：后续Angular版本可能强化错误检查导致构建失败；服务端渲染阶段的错误还可能影响页面SEO完整性，或引发服务端内存泄漏。

解决方法 #

1. 仅在浏览器环境执行订阅
   通过PLATFORM_ID判断运行环境，避免服务端执行订阅逻辑：

import { isPlatformBrowser } from '@angular/common';
import { Component, OnInit, inject, DestroyRef, PLATFORM_ID } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  formControl = new FormControl("default", {nonNullable: true});
  private destroyRef = inject(DestroyRef);
  private platformId = inject(PLATFORM_ID);

  ngOnInit(){
    if (isPlatformBrowser(this.platformId)) {
      this.formControl.valueChanges
        .pipe(takeUntilDestroyed(this.destroyRef))
        .subscribe(value => {
          // 业务逻辑处理
        });   
    }
  }
}

2. 升级Angular版本
   若使用v16早期版本，可能存在takeUntilDestroyed的SSR兼容bug，升级到v16.2+及以上稳定版本通常能解决这类问题。

3. 排除无需SSR的组件
   如果组件不需要在服务端渲染，可通过Angular SSR配置将其排除在服务端渲染流程外。

内容的提问来源于stack exchange，提问作者Murmulodi