From 0d7a6bbaf39a7eea3e3adcdcd966bcae2c9077a9 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 10 Sep 2024 18:01:49 +0300
Subject: [PATCH] UI: Improve dynamic components compilation - compile
 component in place to correctly handle template compile errors.

---
 .../dynamic-component-factory.service.ts      | 45 ++++++++-----------
 .../shared/components/markdown.component.ts   |  2 +-
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts b/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
index 8414e6ff0e..d18797a1be 100644
--- a/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
+++ b/ui-ngx/src/app/core/services/dynamic-component-factory.service.ts
@@ -22,7 +22,7 @@ import {
   NgModule,
   NgModuleRef,
   OnDestroy,
-  Type,
+  Type, ɵNG_COMP_DEF,
   ɵresetCompiledComponents
 } from '@angular/core';
 import { from, Observable, of } from 'rxjs';
@@ -64,7 +64,6 @@ export class DynamicComponentFactoryService {
                      template: string,
                      modules?: Type<any>[],
                      preserveWhitespaces?: boolean,
-                     compileAttempt = 1,
                      styles?: string[]): Observable<DynamicComponentData<T>> {
     return from(import('@angular/compiler')).pipe(
       mergeMap(() => {
@@ -78,32 +77,26 @@ export class DynamicComponentFactoryService {
           declarations: [comp],
           imports: moduleImports
         })(class DynamicComponentInstanceModule extends DynamicComponentModule {});
+
+        const module = this.compiler.compileModuleSync(dynamicComponentInstanceModule);
+        let moduleRef: NgModuleRef<any>;
         try {
-          const module = this.compiler.compileModuleSync(dynamicComponentInstanceModule);
-          let moduleRef: NgModuleRef<any>;
-          try {
-            moduleRef = module.create(this.injector);
-          } catch (e) {
-            this.compiler.clearCacheFor(module.moduleType);
-            throw e;
-          }
-          this.dynamicComponentModulesMap.set(comp, {
-            moduleRef,
-            moduleType: module.moduleType
-          });
-          return of( {
-            componentType: comp,
-            componentModuleRef: moduleRef
-          });
-        } catch (error) {
-          if (compileAttempt === 1) {
-            ɵresetCompiledComponents();
-            return this.createDynamicComponent(componentType, template, modules, preserveWhitespaces, ++compileAttempt, styles);
-          } else {
-            console.error(error);
-            throw error;
-          }
+          moduleRef = module.create(this.injector);
+          // eslint-disable-next-line
+          comp[ɵNG_COMP_DEF];
+        } catch (e) {
+          this.compiler.clearCacheFor(module.moduleType);
+          ɵresetCompiledComponents();
+          throw e;
         }
+        this.dynamicComponentModulesMap.set(comp, {
+          moduleRef,
+          moduleType: module.moduleType
+        });
+        return of( {
+          componentType: comp,
+          componentModuleRef: moduleRef
+        });
       })
     );
   }
diff --git a/ui-ngx/src/app/shared/components/markdown.component.ts b/ui-ngx/src/app/shared/components/markdown.component.ts
index fc7c2d0d8d..069bca2b2d 100644
--- a/ui-ngx/src/app/shared/components/markdown.component.ts
+++ b/ui-ngx/src/app/shared/components/markdown.component.ts
@@ -160,7 +160,7 @@ export class TbMarkdownComponent implements OnChanges {
         },
         template,
         compileModules,
-        true, 1, styles
+        true, styles
       ).subscribe((componentData) => {
           this.tbMarkdownInstanceComponentType = componentData.componentType;
           const injector: Injector = Injector.create({providers: [], parent: this.markdownContainer.injector});