feat: changes for correctly loading webcomponents in shell and slot

libs/angular-remote-components/src/lib/components/slot/slot.component.ts

@@ -14,6 +14,7 @@ import {
 import { BehaviorSubject, Subscription, Observable, combineLatest } from 'rxjs'
 import { RemoteComponentInfo, SLOT_SERVICE, SlotComponentConfiguration, SlotService } from '../../services/slot.service'
 import { ocxRemoteComponent } from '../../model/remote-component'
+import { Technologies } from '@onecx/integration-interface'
 
 @Component({
   selector: 'ocx-slot[name]',
@@ -77,9 +78,14 @@ export class SlotComponent implements OnInit, OnDestroy {
         })
       }
       componentRef?.changeDetectorRef.detectChanges()
-    } else if ((componentInfo.remoteComponent as any).technology === 'WebComponent') {
-      const element = document.createElement((componentInfo.remoteComponent as any).remoteName)
-      viewContainer?.element.nativeElement.appendChild(element)
+    } else if (
+      componentInfo.remoteComponent.technology === Technologies.WebComponentModule ||
+      componentInfo.remoteComponent.technology === Technologies.WebComponentScript
+    ) {
+      if (componentInfo.remoteComponent.elementName) {
+        const element = document.createElement(componentInfo.remoteComponent.elementName)
+        viewContainer?.element.nativeElement.appendChild(element)
+      }
     }
   }
 

libs/angular-remote-components/src/lib/services/slot.service.ts

@@ -1,12 +1,18 @@
 import { loadRemoteModule } from '@angular-architects/module-federation'
 import { Injectable, InjectionToken, Type } from '@angular/core'
-import { RemoteComponent, RemoteComponentsTopic } from '@onecx/integration-interface'
+import { RemoteComponent, RemoteComponentsTopic, Technologies } from '@onecx/integration-interface'
 import { Observable, map, shareReplay } from 'rxjs'
 import { PermissionService } from './permission.service'
 
 export const SLOT_SERVICE: InjectionToken<SlotService> = new InjectionToken('SLOT_SERVICE')
 
-export type RemoteComponentInfo = { appId: string; productName: string; baseUrl: string }
+export type RemoteComponentInfo = {
+  appId: string
+  productName: string
+  baseUrl: string
+  technology: Technologies
+  elementName?: string
+}
 
 export type SlotComponentConfiguration = {
   componentType: Promise<Type<unknown> | undefined> | Type<unknown> | undefined
@@ -39,11 +45,14 @@ export class SlotService implements SlotService {
           .map((remoteComponent) => remoteComponent)
       ),
       map((infos) =>
-        infos.map((remoteComponent) => ({
-          componentType: this.loadComponent(remoteComponent),
-          remoteComponent,
-          permissions: this.permissionsService.getPermissions(remoteComponent.appId, remoteComponent.productName),
-        }))
+        infos.map((remoteComponent) => {
+          console.log('getComponentsForSlot infos', remoteComponent)
+          return {
+            componentType: this.loadComponent(remoteComponent),
+            remoteComponent,
+            permissions: this.permissionsService.getPermissions(remoteComponent.appId, remoteComponent.productName),
+          }
+        })
       ),
       shareReplay()
     )
@@ -59,25 +68,30 @@ export class SlotService implements SlotService {
     remoteEntryUrl: string
     exposedModule: string
     productName: string
+    remoteName: string
+    technology: string
   }): Promise<Type<unknown> | undefined> {
     try {
       const exposedModule = component.exposedModule.startsWith('./')
         ? component.exposedModule.slice(2)
         : component.exposedModule
-      if (!(component as any).technology || (component as any).technology === 'Angular') {
+      if (component.technology === Technologies.Angular || component.technology === Technologies.WebComponentModule) {
         const m = await loadRemoteModule({
           type: 'module',
           remoteEntry: component.remoteEntryUrl,
           exposedModule: './' + exposedModule,
         })
-        return m[exposedModule]
+        if (component.technology === Technologies.Angular) {
+          return m[exposedModule]
+        }
+        return undefined
       }
       await loadRemoteModule({
         type: 'script',
-        remoteName: component.productName,
+        remoteName: component.remoteName,
         remoteEntry: component.remoteEntryUrl,
         exposedModule: './' + exposedModule,
-      });
+      })
       return undefined
     } catch (e) {
       console.log('Failed to load remote module ', component.exposedModule, component.remoteEntryUrl, e)

libs/integration-interface/src/lib/topics/current-mfe/v1/mfe-info.model.ts

@@ -9,5 +9,6 @@ export interface MfeInfo {
     appId: string
     productName: string
     remoteName?: string
+    elementName?: string
   }
 

libs/integration-interface/src/lib/topics/remote-components/v1/remote-component.model.ts

@@ -1,8 +1,17 @@
+export enum Technologies {
+  Angular = 'Angular',
+  WebComponent = 'WebComponent',
+  WebComponentScript = 'WebComponentScript',
+  WebComponentModule = 'WebComponentModule',
+}
+
 export type RemoteComponent = {
   name: string
   baseUrl: string
   remoteEntryUrl: string
   appId: string
   productName: string
   exposedModule: string
+  remoteName: string
+  technology: Technologies
 }

libs/portal-integration-angular/src/lib/core/initializer/standalone.initializer.ts

@@ -76,6 +76,8 @@ export function standaloneInitializer(
         shellName: 'standalone',
         appId: '',
         productName: '',
+        remoteName: '',
+        elementName: '',
       }
       await appStateService.globalLoading$.publish(true)
       await appStateService.currentMfe$.publish(standaloneMfeInfo)