Stop a third-party Angular widget from leaking after navigation

Wrap a chart SDK that creates an instance, installs a window resize listener, and starts a ResizeObserver. Repeated route navigation currently leaves old charts and callbacks alive. Implement one adapter that owns setup and idempotent teardown, then integrate it with an Angular component and test that every resource is released exactly once.

navigate to chart 10 times -> 10 creations, 10 destructions
active resize listeners after leaving -> 0
active observers after leaving        -> 0
destroy called twice                  -> no duplicate SDK destruction

• Keep all resource ownership inside one adapter.
• Make disposal safe to call more than once.
• Register Angular cleanup immediately after creation.
• Disconnect observers and remove listeners before dropping references.
• Do not rely on garbage collection to call SDK cleanup.

1. Create an adapter that stores the SDK instance and all cleanup handles.
2. Use stable function references for add and remove event listener.
3. Make dispose idempotent and release every owned resource.
4. Create the adapter after the host element exists and register it with DestroyRef.
5. Use fakes to count creation, events, observation, disconnection, and destruction.

class ChartAdapter {
  private disposed = false;
  private readonly chart: ChartInstance;
  private readonly observer: ResizeObserver;
  private readonly onResize = () => this.chart.resize();

  constructor(host: HTMLElement, sdk: ChartSdk) {
    this.chart = sdk.create(host);
    this.observer = new ResizeObserver(() => this.chart.resize());
    this.observer.observe(host);
    window.addEventListener('resize', this.onResize);
  }

  dispose(): void {
    if (this.disposed) return;
    this.disposed = true;
    window.removeEventListener('resize', this.onResize);
    this.observer.disconnect();
    this.chart.destroy();
  }
}

@Component({selector: 'app-chart-host', template: '<div #host></div>'})
export class ChartHost implements AfterViewInit {
  private readonly host = viewChild.required<ElementRef<HTMLElement>>('host');
  private readonly sdk = inject(ChartSdk);
  private readonly destroyRef = inject(DestroyRef);

  ngAfterViewInit(): void {
    const adapter = new ChartAdapter(this.host().nativeElement, this.sdk);
    this.destroyRef.onDestroy(() => adapter.dispose());
  }
}

Setup and teardown are O(1) per component instance; the SDK controls the chart's internal rendering complexity.

• Creation can fail partway through, so production code should release resources already acquired.
• A hidden rather than destroyed component needs a pause policy separate from disposal.
• SSR must avoid constructing browser-only SDK objects on the server.
• A shared SDK singleton must not accidentally own route-scoped chart instances forever.

• Destroy the fixture twice through test cleanup paths and verify SDK destroy is called once.
• Dispatch resize after destruction and verify no chart method runs.
• Create and destroy several fixtures and assert active listener and observer counts return to zero.
• Throw during SDK creation and verify partially created resources are not retained.

• Removing an anonymous listener with a new function reference does nothing.
• Destroying only the SDK instance leaves observers and browser listeners alive.
• A root service that stores chart instances extends their lifetime beyond the route.
• Waiting for garbage collection does not run required library cleanup.