Fix memory leak in component renderer

mesop/version.py

@@ -1,6 +1,6 @@
 """Contains the version string."""
 
-VERSION = "0.12.9"
+VERSION = "0.12.10beta5"
 
 if __name__ == "__main__":
   print(VERSION)

mesop/web/src/component_renderer/component_renderer.ts

@@ -8,6 +8,7 @@ import {
   TemplateRef,
   ViewChild,
   ViewContainerRef,
+  ViewRef,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {
@@ -51,6 +52,7 @@ export class ComponentRenderer {
   private _boxType: BoxType | undefined;
   private _componentRef!: ComponentRef<BaseComponent>;
   customElement: HTMLElement | undefined;
+  projectedViewRef: ViewRef | undefined;
 
   constructor(
     private channel: Channel,
@@ -65,6 +67,13 @@ export class ComponentRenderer {
         MESOP_EVENT_NAME,
         this.dispatchCustomUserEvent,
       );
+      if (this.customElement.parentNode) {
+        this.customElement.parentNode.removeChild(this.customElement);
+      }
+    }
+    if (this.projectedViewRef) {
+      this.applicationRef.detachView(this.projectedViewRef);
+      this.projectedViewRef.destroy();
     }
   }
 
@@ -206,14 +215,14 @@ export class ComponentRenderer {
     const typeName = this.component.getType()?.getName()!;
     let options = {};
     if (this.component.getChildrenList().length) {
-      const projectedViewRef = this.childrenTemplate.createEmbeddedView(this);
+      this.projectedViewRef = this.childrenTemplate.createEmbeddedView(this);
       // Need to attach view or it doesn't render.
       // View automatically detaches when it is destroyed.
       // Template will destroy each ViewRef when it is destroyed.
       const index = this.component.getType()?.getTypeIndex() ?? 0;
-      this.applicationRef.attachView(projectedViewRef);
+      this.applicationRef.attachView(this.projectedViewRef);
       const projectableNodes = [];
-      projectableNodes[index] = projectedViewRef.rootNodes;
+      projectableNodes[index] = this.projectedViewRef.rootNodes;
       options = {
         projectableNodes,
       };