Migrate to webcomponent (#167)

* feat: migrate theme ui

* fix: change helm value detail

* fix: use correct lib version

* fix: remove config from shared, correct webpack entry

* fix: remove dialogsvc from shared module

* fix: finish migration to webcomponent and raise libs

---------

Co-authored-by: Christian Badura <[email protected]>
Co-authored-by: Henry Täschner <[email protected]>

angular.json

@@ -35,7 +35,7 @@
               "node_modules/@onecx/portal-integration-angular/assets/output.css",
               "src/styles.scss"
             ],
-            "scripts": [],
+            "scripts": ["node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"],
             "extraWebpackConfig": "webpack.config.js",
             "commonChunk": false
           },

helm/values.yaml

@@ -16,6 +16,9 @@ app:
           description: "OneCX Theme UI"
           note: "OneCX Theme UI auto import via MF operator"
           type: MODULE
+          technology: WEBCOMPONENTMODULE
+          remoteName: onecx-theme
+          tagName: ocx-theme-component
     # Permission
     permission:
       enabled: true

package.json

@@ -41,6 +41,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",
@@ -52,15 +53,18 @@
     "@ngrx/router-store": "^15.4.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@onecx/accelerator": "^4.39.0",
-    "@onecx/angular-accelerator": "^4.39.0",
-    "@onecx/angular-integration-interface": "^4.39.0",
-    "@onecx/angular-remote-components": "^4.39.0",
-    "@onecx/angular-testing": "^4.39.0",
-    "@onecx/integration-interface": "^4.39.0",
-    "@onecx/keycloak-auth": "^4.39.0",
-    "@onecx/portal-integration-angular": "^4.39.0",
-    "@onecx/portal-layout-styles": "^4.39.0",
+    "@onecx/accelerator": "^4.42.0",
+    "@onecx/angular-accelerator": "^4.42.0",
+    "@onecx/angular-auth": "^4.42.0",
+    "@onecx/angular-integration-interface": "^4.42.0",
+    "@onecx/angular-remote-components": "^4.42.0",
+    "@onecx/angular-webcomponents": "^4.42.0",
+    "@onecx/angular-testing": "^4.42.0",
+    "@onecx/integration-interface": "^4.42.0",
+    "@onecx/keycloak-auth": "^4.42.0",
+    "@onecx/portal-integration-angular": "^4.42.0",
+    "@onecx/portal-layout-styles": "^4.42.0",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
     "file-saver": "^2.0.5",
     "i18n-iso-countries": "^7.11.0",
     "keycloak-angular": "^13.1.0",

src/app/app-entrypoint.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/app-entrypoint.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app-entrypoint.component.html'
+})
+export class AppEntrypointComponent {}

src/app/onecx-theme-remote.module.ts

@@ -1,27 +1,44 @@
-import { HttpClient } from '@angular/common/http'
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
+import { HttpClient, HttpClientModule } from '@angular/common/http'
+import { BrowserModule } from '@angular/platform-browser'
+import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core'
+import { Router, RouterModule, Routes } from '@angular/router'
 import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core'
 
 import {
   AppStateService,
   ConfigurationService,
   createTranslateLoader,
+  PortalApiConfiguration,
   PortalCoreModule,
   PortalMissingTranslationHandler
 } from '@onecx/portal-integration-angular'
 import { addInitializeModuleGuard } from '@onecx/angular-integration-interface'
+import { createAppEntrypoint, initializeRouter, startsWith } from '@onecx/angular-webcomponents'
+import { AppEntrypointComponent } from './app-entrypoint.component'
+import { AngularAuthModule } from '@onecx/angular-auth'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { environment } from 'src/environments/environment'
+import { Configuration } from './shared/generated'
+
+function apiConfigProvider(configService: ConfigurationService, appStateService: AppStateService) {
+  return new PortalApiConfiguration(Configuration, environment.apiPrefix, configService, appStateService)
+}
 
 const routes: Routes = [
   {
-    path: '',
+    matcher: startsWith(''),
     loadChildren: () => import('./theme/theme.module').then((m) => m.ThemeModule)
   }
 ]
 @NgModule({
+  declarations: [AppEntrypointComponent],
   imports: [
+    AngularAuthModule,
+    BrowserAnimationsModule,
+    BrowserModule,
+    HttpClientModule,
     PortalCoreModule.forMicroFrontend(),
-    RouterModule.forChild(addInitializeModuleGuard(routes)),
+    RouterModule.forRoot(addInitializeModuleGuard(routes)),
     TranslateModule.forRoot({
       isolate: true,
       loader: {
@@ -33,11 +50,24 @@ const routes: Routes = [
     })
   ],
   exports: [],
-  providers: [ConfigurationService],
+  providers: [
+    ConfigurationService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeRouter,
+      multi: true,
+      deps: [Router, AppStateService]
+    },
+    { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] }
+  ],
   schemas: []
 })
-export class OneCXThemeModule {
-  constructor() {
+export class OneCXThemeModule implements DoBootstrap {
+  constructor(private injector: Injector) {
     console.info('OneCX Theme Module constructor')
   }
+
+  ngDoBootstrap(): void {
+    createAppEntrypoint(AppEntrypointComponent, 'ocx-theme-component', this.injector)
+  }
 }