The page get freeze when the editor loaded component destroyed and clicking some places in Angular

[Yaseern]

Describe the bug
I have separate component for the editor where I do initialize and handle the functionality. This component open from the MatDialog pop up.
Initiate functionality and use the editor works well but in later days we had an issue when click certain parent component (the editor component called in child component - smart/dump pattern) the page get start to freeze.
Then I have improved the editor component where without directly import, I have modified when the component initialized the editor should import the package. Afterwards, issue come in a different way which means same place how it earlier come but now it reproduced when the editor component loaded and after destroyed when i click the earlier place the issue appear.

To Reproduce

This is the initial code, at first time implementation this works fine, but afterwards we have few code improvement done in a different place and it shouldn't be impact this editor as what we observed.

  <app-modal-header [dialogRef]="dialogRef"> Edit Image</app-modal-header>
  <app-modal-body>
    <ng-container *ngIf="isEnabledAdvanceEditor;">
      <advance-image-editor [dialogRef]="dialogRef" [picture]="picture"></advance-image-editor>
    </ng-container>
  </app-modal-body>

import ImageEditor from "tui-image-editor";

@ViewChild("imageEditorContainer", { static: true }) imageEditorContainer!: ElementRef;
private editorInstance: any;

ngAfterViewInit(): void {
    this.editorInstance = new ImageEditor(this.imageEditorContainer.nativeElement, {
      includeUI: {
         loadImage: {
          path: this.filePath,
          name: this.originalFileName
        },
        theme: customTheme,
        menu: ["shape", "crop", "icon", "flip", "rotate"], // Customize as needed
        initMenu: "shape",
        locale: {
          ...localizedImageEditorContent[this.locale]
        },
        uiSize: { width: "100%", height: "700px" },
        menuBarPosition: "bottom"
      } as any,
      cssMaxWidth: 1000,
      cssMaxHeight: 1000,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
      }
    });
  }

We have modified the code without direct import the package

  async initializeEditor() {
    const ImageEditor = await this.preloadImageEditor();
    const container = this.imageEditorContainer.nativeElement;

    this.editorInstance = new ImageEditor(container, {
      includeUI: {
        loadImage: {
          path: this.filePath,
          name: this.originalFileName
        },
        theme: customTheme,
        menu: ["shape", "crop", "icon", "flip", "rotate"], // Customize as needed
        initMenu: "shape",
        locale: {
          ...localizedImageEditorContent[this.locale]
        },
        uiSize: { width: "100%", height: "700px" },
        menuBarPosition: "bottom"
      } as any,
      cssMaxWidth: 1000,
      cssMaxHeight: 1000,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
      },
      usageStatistics: false
    });
  }

  async preloadImageEditor() {
    const ImageEditor = require("tui-image-editor");
    return ImageEditor;
  }

If i commented the component called in HTML, then the issue no longer comes,

 <ng-container *ngIf="isEnabledAdvanceEditor;">
     <!-- <advance-image-editor [dialogRef]="dialogRef" [picture]="picture"></advance-image-editor>-->
    </ng-container>

• OS: Windows 11
• Browser Chrome
• Version 131.0.6778.265

Additional context

If the page is freeze we can't do anything on the application we have to close the tab and load in new tab again to work on it.

To overcome the issue

constructor(
private ngZone: NgZone
) {}

 async initializeEditor() {
    this.ngZone.runOutsideAngular(async () => { //Running outside the zone the issue is resolved
      const ImageEditor = await this.preloadImageEditor();
      const container = this.imageEditorContainer.nativeElement;

      this.editorInstance = new ImageEditor(container, {
        //same properties
   })
})

I want to know why this issue sudden comes. Is there any known issue with the tui-image-editor in Angular which is not resolved yet, or is this the way we have to initialize it?
and more I noticed this has dependency with the fabric.js, and it has latest update which not included in this editor. Is there any plan for new release can expect in this package.

[joseluiz98]

Did you find a solution for this?? I'm stuck in the same problem!

[Yaseern]

@joseluiz98 The solution we have to load the tui image editor outside the angular zone. I have already mentioned in my description.

here is the solution,

  @ViewChild("imageEditorContainer", { static: true }) imageEditorContainer!: ElementRef;
  private editorInstance: any;

  constructor(private ngZone: NgZone) {
    super();
    this.initializeEditor().then();
  }

  async initializeEditor() {
    this.ngZone.runOutsideAngular(async () => {
      const ImageEditor = await this.preloadImageEditor();
      const container = this.imageEditorContainer.nativeElement;

      this.editorInstance = new ImageEditor(container, {
        usageStatistics: false
        //...
        //configuration
      });
    });
  }

  async preloadImageEditor() {
    const ImageEditor = require("tui-image-editor");
    return ImageEditor;
  }

  //Make sure instance deletion when component destroy
  ngOnDestroy() {
    this.destroyEditor();
  }

  destroyEditor() {
    if (this.editorInstance) {
      this.editorInstance.destroy();
      this.editorInstance = null;
    }

    if (this.imageEditorContainer?.nativeElement) {
      this.imageEditorContainer.nativeElement.innerHTML = "";
    }
  }

[joseluiz98]

@joseluiz98 The solution we have to load the tui image editor outside the angular zone. I have already mentioned in my description.

here is the solution,

@ViewChild("imageEditorContainer", { static: true }) imageEditorContainer!: ElementRef;
private editorInstance: any;

constructor(private ngZone: NgZone) {
super();
this.initializeEditor().then();
}

async initializeEditor() {
this.ngZone.runOutsideAngular(async () => {
const ImageEditor = await this.preloadImageEditor();
const container = this.imageEditorContainer.nativeElement;

  this.editorInstance = new ImageEditor(container, {
    usageStatistics: false
    //...
    //configuration
  });
});

}

async preloadImageEditor() {
const ImageEditor = require("tui-image-editor");
return ImageEditor;
}

//Make sure instance deletion when component destroy
ngOnDestroy() {
this.destroyEditor();
}

destroyEditor() {
if (this.editorInstance) {
this.editorInstance.destroy();
this.editorInstance = null;
}

if (this.imageEditorContainer?.nativeElement) {
  this.imageEditorContainer.nativeElement.innerHTML = "";
}

}

It worked like a charm, thank you!