I found that after DialogPage is destroyed, BaseDialogPage can still be seen in the memory viewer.

//BaseDialogPage
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  template: '',
  standalone: true,
})
export class BaseDialogPage implements OnInit, OnDestroy {
  constructor() {}

  ngOnInit() {
    console.log('BaseDialogPage initialized');
  }

  ngOnDestroy() {
    console.log('BaseDialogPage destroyed');
  }

  showMsg() {
    console.log('show error');
  }
}

//DialogPage
import { Component, OnInit, OnDestroy } from '@angular/core';
import { BaseDialogPage } from './basedialog.page';

@Component({
  template: '<p>Dialog Page Content</p>',
  standalone: true
})
export class DialogPage extends BaseDialogPage implements OnInit, OnDestroy {

  constructor() {
    super();
  }

  override ngOnInit() {
    super.ngOnInit();
    this.showMsg();
  }

  override ngOnDestroy() {
    super.ngOnDestroy();
    console.log("DialogPage destroyed");
  }
}

//Page 1
import { Component, OnInit, ViewChild, ViewContainerRef, OnDestroy, ComponentRef } from '@angular/core';

@Component({
  template: `
    <h2>This is Page 1</h2>
    <button (click)="onClick()">Open Dialog</button>
    <ng-container #childrenanchor></ng-container>
  `,
  standalone: true
})
export class Page1Page implements OnInit, OnDestroy {
  @ViewChild('childrenanchor', { read: ViewContainerRef }) childrenanchor: ViewContainerRef | undefined;
  private timeoutId: any;
  private componentRef: ComponentRef<any> | undefined;

  constructor() { }

  ngOnInit() { }

  ngOnDestroy() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
    if (this.componentRef) {
      this.componentRef.destroy();
    }
  }

  async onClick() {
    const { DialogPage } = await import('../../app/dialog.page');

    if (this.childrenanchor != undefined) {
      this.childrenanchor.clear();
      this.componentRef = this.childrenanchor.createComponent(DialogPage);

      if (this.childrenanchor != undefined) {
        this.timeoutId = setTimeout(() => {
         
          if (this.componentRef) {
            this.componentRef.destroy();
          }
          this.childrenanchor?.clear();
        }, 5000);
      }
    }
  }
}

//Page2
import { Component, OnInit, ViewChild, ViewContainerRef, OnDestroy, ComponentRef } from '@angular/core';

@Component({
  template: `
    <h2>This is Page 2</h2>    
  `,
  standalone: true
})
export class Page2Page implements OnInit, OnDestroy {


  constructor() { }

  ngOnInit() { }

  ngOnDestroy() {
    
  }

  
}

My operation steps:

1. Refresh the page and record the first snapshot “Snapshot1” on Page1.

2. Click “Open Dialog”, wait for the Dialog to disappear, and record the second snapshot “Snapshot2” after it disappears. Switch to Page2.

3. Record the third snapshot. When comparing the third snapshot with the first snapshot “Snapshot3”, it is found that BaseDialogPage is not destroyed. DialogPage is destroyed.

My BaseDialogPage no longer contains any code that affects destruction. I suspect this is an issue with Angular’s inheritance destruction mechanism.