引起 Angular NG0205 错误的一种可能的原因

原创

华山剑宗风清扬 2025-08-11 10:35:07 ©著作权

文章标签 Angular github typescript 文章分类 TypeScript 前端开发 私藏项目实操分享

©著作权归作者所有：来自51CTO博客作者华山剑宗风清扬的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 Angular 框架中，NG0205 错误代码表示“注入器已被销毁”。当应用程序尝试在已销毁的注入器上执行操作时，就会触发此错误。注入器（Injector）是 Angular 依赖注入机制的核心组件，负责管理服务的创建和生命周期。当注入器被销毁后，任何对其的进一步操作都会导致 NG0205 错误。

引发 NG0205 错误的常见原因：

组件或服务的生命周期管理不当： 如果在组件或服务被销毁后，仍然尝试访问其依赖的服务或资源，可能会导致此错误。
未正确取消订阅的 RxJS 订阅： 在 Angular 中，使用 RxJS 进行异步操作时，如果不在组件销毁时取消订阅，可能会在组件销毁后尝试访问已销毁的注入器，从而引发错误。
在服务器端渲染（SSR）环境中的不当操作： 在 Angular Universal 中，如果在服务器端执行了仅在浏览器中可用的操作，可能会导致此错误。

示例分析：

假设有一个 Angular 组件，在其 ngOnInit 生命周期钩子中订阅了一个 Observable：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from './data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit, OnDestroy {
  private dataSubscription: Subscription;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataSubscription = this.dataService.getData().subscribe(data => {
      // 处理数据
    });
  }

  ngOnDestroy() {
    // 未取消订阅
  }
}

在上述代码中，ngOnInit 方法中订阅了 dataService.getData() 返回的 Observable，但在 ngOnDestroy 方法中未取消订阅。如果组件被销毁，而订阅仍然存在，可能会在组件销毁后尝试访问已销毁的注入器，从而引发 NG0205 错误。

解决方案：

在组件销毁时，确保取消所有订阅：

ngOnDestroy() {
  if (this.dataSubscription) {
    this.dataSubscription.unsubscribe();
  }
}

或者，使用 takeUntil 操作符与 Subject 结合，自动管理订阅的生命周期：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class ExampleComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.dataService.getData()
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        // 处理数据
      });
  }

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

通过上述方法，可以在组件销毁时自动取消订阅，避免在已销毁的注入器上执行操作，从而防止 NG0205 错误的发生。

参考资料：