From eb80995fd1b4e4c24a0bbf75a069c2e2176b9dc6 Mon Sep 17 00:00:00 2001
From: Kim Tran <kim_tran@hotmail.de>
Date: Mon, 8 Apr 2024 07:19:05 +0200
Subject: [PATCH] fix: componentType can be undefined (#208)

* fix: ocxSrc directive with external image url, ocx slots

* fix: loading remote component

* fix: lint issues

* fix: componentType may be undefined

---------

Co-authored-by: kim.tran <kim.tran@capgemini.com>
---
 .../src/lib/components/slot/slot.component.ts | 24 +++++++++++--------
 .../src/lib/services/slot.service.ts          |  4 +++-
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/libs/angular-remote-components/src/lib/components/slot/slot.component.ts b/libs/angular-remote-components/src/lib/components/slot/slot.component.ts
index a834a677..863e78d1 100644
--- a/libs/angular-remote-components/src/lib/components/slot/slot.component.ts
+++ b/libs/angular-remote-components/src/lib/components/slot/slot.component.ts
@@ -29,7 +29,9 @@ export class SlotComponent implements OnInit, OnDestroy {
 
   subscription: Subscription | undefined
   components$:
-    | Observable<{ componentType: Type<unknown>; remoteComponent: RemoteComponentInfo; permissions: string[] }[]>
+    | Observable<
+        { componentType: Type<unknown> | undefined; remoteComponent: RemoteComponentInfo; permissions: string[] }[]
+      >
     | undefined
 
   constructor(@Inject(SLOT_SERVICE) private slotService: SlotService) {}
@@ -40,16 +42,18 @@ export class SlotComponent implements OnInit, OnDestroy {
       ([viewContainers, components]) => {
         if (viewContainers && viewContainers.length === components.length) {
           components.forEach((componentInfo, i) => {
-            const componentRef = viewContainers.get(i)?.createComponent<any>(componentInfo.componentType)
-            if (componentRef && 'ocxInitRemoteComponent' in componentRef.instance) {
-              ;(componentRef.instance as ocxRemoteComponent).ocxInitRemoteComponent({
-                appId: componentInfo.remoteComponent.appId,
-                productName: componentInfo.remoteComponent.productName,
-                baseUrl: componentInfo.remoteComponent.baseUrl,
-                permissions: componentInfo.permissions,
-              })
+            if (componentInfo.componentType) {
+              const componentRef = viewContainers.get(i)?.createComponent<any>(componentInfo.componentType)
+              if (componentRef && 'ocxInitRemoteComponent' in componentRef.instance) {
+                ;(componentRef.instance as ocxRemoteComponent).ocxInitRemoteComponent({
+                  appId: componentInfo.remoteComponent.appId,
+                  productName: componentInfo.remoteComponent.productName,
+                  baseUrl: componentInfo.remoteComponent.baseUrl,
+                  permissions: componentInfo.permissions,
+                })
+              }
+              componentRef?.changeDetectorRef.detectChanges()
             }
-            componentRef?.changeDetectorRef.detectChanges()
           })
         }
       }
diff --git a/libs/angular-remote-components/src/lib/services/slot.service.ts b/libs/angular-remote-components/src/lib/services/slot.service.ts
index a2f56f63..5f4cd32d 100644
--- a/libs/angular-remote-components/src/lib/services/slot.service.ts
+++ b/libs/angular-remote-components/src/lib/services/slot.service.ts
@@ -9,5 +9,7 @@ export interface SlotService {
   init(): Promise<void>
   getComponentsForSlot(
     slotName: string
-  ): Observable<{ componentType: Type<unknown>; remoteComponent: RemoteComponentInfo; permissions: string[] }[]>
+  ): Observable<
+    { componentType: Type<unknown> | undefined; remoteComponent: RemoteComponentInfo; permissions: string[] }[]
+  >
 }