feat: utils for webcomponents

libs/angular-webcomponents/package.json

@@ -2,6 +2,12 @@
   "name": "@onecx/angular-webcomponents",
   "version": "4.33.0",
   "peerDependencies": {
+    "@angular/core": "^15.2.7 || ^16.0.0 || ^17.0.0",
+    "@angular/platform-browser": "^15.2.7 || ^16.0.0 || ^17.0.0",
+    "@angular/elements": "^15.2.7 || ^16.0.0 || ^17.0.0",
+    "@angular/router": "^15.2.7 || ^16.0.0 || ^17.0.0",
+    "@onecx/portal-integration-angular": "^4",
+    "rxjs": "~7.8.0"
   },
   "dependencies": {},
   "publishConfig": {

libs/angular-webcomponents/src/index.ts

@@ -1 +1,4 @@
 export * from './lib/model/remote-webcomponent'
+export * from './lib/utils/webcomponent-bootstrap.utils'
+export * from './lib/utils/webcomponent-router-initializer.utils'
+export * from './lib/utils/webcomponent-router.utils'

libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts

@@ -0,0 +1,37 @@
+import { createCustomElement } from '@angular/elements'
+import { createApplication } from '@angular/platform-browser'
+import { EnvironmentProviders, NgZone, PlatformRef, Provider, Type, VERSION, Version, getPlatform } from '@angular/core'
+
+export async function bootstrapRemoteComponent(
+  component: Type<any>,
+  elementName: string,
+  providers: (Provider | EnvironmentProviders)[]
+): Promise<void> {
+  const app = await createApplication({
+    providers: [
+      (window as any)['@angular-architects/module-federation-tools'].ngZone
+        ? {
+            provide: NgZone,
+            useValue: (window as any)['@angular-architects/module-federation-tools'].ngZone,
+          }
+        : [],
+      ...providers,
+    ],
+  })
+
+  const platform = getPlatform()
+  let platformCache: Map<Version, PlatformRef> = (window as any)['@angular-architects/module-federation-tools']
+    .platformCache
+  if (!platformCache) {
+    platformCache = new Map<Version, PlatformRef>()
+    ;(window as any)['@angular-architects/module-federation-tools'].platformCache = platformCache
+  }
+  const version = VERSION
+  platform && platformCache.set(version, platform)
+
+  const myRemoteComponentAsWebComponent = createCustomElement(component, {
+    injector: app.injector,
+  })
+
+  customElements.define(elementName, myRemoteComponentAsWebComponent)
+}

libs/angular-webcomponents/src/lib/utils/webcomponent-router-initializer.utils.ts

@@ -0,0 +1,21 @@
+import { Router } from '@angular/router'
+import { AppStateService } from '@onecx/portal-integration-angular'
+import { firstValueFrom, map } from 'rxjs'
+
+export function initializeRouter(router: Router, appStateService: AppStateService) {
+  return () =>
+    firstValueFrom(
+      appStateService.currentMfe$.asObservable().pipe(
+        map((mfeInfo) => {
+          const routes = router.config
+          routes.forEach((route) => {
+            route.data = {
+              ...route.data,
+              mfeInfo: mfeInfo,
+            }
+          })
+          router.resetConfig(routes)
+        })
+      )
+    )
+}

libs/angular-webcomponents/src/lib/utils/webcomponent-router.utils.ts

@@ -0,0 +1,17 @@
+import { Route, UrlMatcher, UrlSegment, UrlSegmentGroup } from '@angular/router'
+
+export function match(prefix: string): UrlMatcher {
+  return (url: UrlSegment[], UrlSegmentGroup: UrlSegmentGroup, route: Route) => {
+    const mfeBaseHref: string = route?.data?.['mfeInfo']?.baseHref
+    if (!mfeBaseHref) {
+      console.warn('mfeInfo was not provided for route')
+    }
+    const baseHrefSegmentAmount = mfeBaseHref.split('/').filter((value) => value).length
+    const urlWithoutBaseHref = url.slice(baseHrefSegmentAmount)
+    const index = prefix === '' ? 0 : urlWithoutBaseHref.findIndex((u) => u.path === prefix)
+    if (index >= 0) {
+      return { consumed: url.slice(0, index + baseHrefSegmentAmount) }
+    }
+    return null
+  }
+}

package.json

@@ -15,6 +15,7 @@
     "@angular/common": "^15.2.7",
     "@angular/compiler": "^15.2.7",
     "@angular/core": "^15.2.7",
+    "@angular/elements": "^15.2.7",
     "@angular/forms": "^15.2.7",
     "@angular/platform-browser": "^15.2.7",
     "@angular/platform-browser-dynamic": "^15.2.7",