feat: webcomponents utils

libs/angular-webcomponents/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@onecx/angular-webcomponents",
   "version": "4.36.0",
-  "peerDependencies": {},
+  "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": {
     "access": "public"

libs/angular-webcomponents/src/index.ts

@@ -1 +1,3 @@
+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

@@ -1,3 +1,21 @@
-export function initializeRouter() {
-  console.log('tmp')
+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,29 @@
+import { Route, UrlMatcher, UrlSegment, UrlSegmentGroup } from '@angular/router'
+
+export function startsWith(prefix: string): UrlMatcher {
+  return (url: UrlSegment[], UrlSegmentGroup: UrlSegmentGroup, route: Route) => {
+    const urlWithoutBaseHref = sliceBaseHref(route, url)
+
+    const fullUrl = urlWithoutBaseHref.map((u) => u.path).join('/')
+    if (fullUrl.startsWith(prefix)) {
+      const prefixLength = prefix.split('/').filter((value) => value).length
+      return { consumed: url.slice(0, baseHrefSegmentAmount(url, urlWithoutBaseHref) + prefixLength) }
+    }
+    return null
+  }
+}
+
+export function sliceBaseHref(route: Route, url: UrlSegment[]): UrlSegment[] {
+  const mfeBaseHref: string = route?.data?.['mfeInfo']?.baseHref
+  if (!mfeBaseHref) {
+    console.warn(
+      'mfeInfo was not provided for route. initializeRouter function is required to be registered as app initializer.'
+    )
+  }
+  const baseHrefSegmentAmount = mfeBaseHref.split('/').filter((value) => value).length
+  return url.slice(baseHrefSegmentAmount)
+}
+
+export function baseHrefSegmentAmount(url: UrlSegment[], urlWithoutBaseHref: UrlSegment[]) {
+  return url.length - urlWithoutBaseHref.length
+}

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",