From a8793410c94f089c2c2adce64c446e21ea3b86bb Mon Sep 17 00:00:00 2001 From: Christian Badura <93912698+cbadura@users.noreply.github.com> Date: Wed, 17 Jul 2024 08:31:49 +0200 Subject: [PATCH] Migrate to webcomponent (#148) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: slot search tests * fix: prod detail and img container tests * fix: prod search app search tests * fix: all tests * fix: last bit * fix: delete comment in mixins css * feat: migrate ps ui * fix: use correct lib version * fix: remove config from shared, correct webpack entry * fix: finish migration to webcomponent and raise libs --------- Co-authored-by: Christian Badura Co-authored-by: Henry Täschner <129834483+HenryT-CG@users.noreply.github.com> --- angular.json | 2 +- helm/values.yaml | 3 + package-lock.json | 162 +++++++++++++------ package.json | 18 ++- src/app/app-entrypoint.component.html | 1 + src/app/app-entrypoint.component.ts | 7 + src/app/onecx-product-store-remote.module.ts | 46 +++++- src/app/shared/shared.module.ts | 21 +-- src/bootstrap.ts | 16 +- webpack.config.js | 16 +- 10 files changed, 192 insertions(+), 100 deletions(-) create mode 100644 src/app/app-entrypoint.component.html create mode 100644 src/app/app-entrypoint.component.ts diff --git a/angular.json b/angular.json index 74bdd10..b0758c1 100644 --- a/angular.json +++ b/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 }, diff --git a/helm/values.yaml b/helm/values.yaml index f3c95f5..b898895 100644 --- a/helm/values.yaml +++ b/helm/values.yaml @@ -16,6 +16,9 @@ app: description: "OneCX Product Store UI" note: "OneCX Product Store UI module auto import via MF operator" type: MODULE + technology: WEBCOMPONENTMODULE + remoteName: onecx-product-store + tagName: ocx-product-store-component # Permission permission: enabled: true diff --git a/package-lock.json b/package-lock.json index 0e76717..4639b96 100644 --- a/package-lock.json +++ b/package-lock.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", @@ -25,13 +26,16 @@ "@ngrx/router-store": "^15.4.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", - "@onecx/accelerator": "^4.30.1", - "@onecx/angular-accelerator": "^4.30.1", - "@onecx/angular-integration-interface": "^4.30.1", - "@onecx/integration-interface": "^4.30.1", - "@onecx/keycloak-auth": "^4.30.1", - "@onecx/portal-integration-angular": "^4.30.1", - "@onecx/portal-layout-styles": "^4.30.1", + "@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-webcomponents": "^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", "keycloak-angular": "^13.1.0", "ngx-color": "^8.0.3", @@ -1286,6 +1290,21 @@ "zone.js": "~0.11.4 || ~0.12.0 || ~0.13.0" } }, + "node_modules/@angular/elements": { + "version": "15.2.7", + "resolved": "https://registry.npmjs.org/@angular/elements/-/elements-15.2.7.tgz", + "integrity": "sha512-ojjq07Xj5k7QCfq3U7Kfobe6UgM7vZsudgRynT43uHpXkWNmoxEKbQ279LY+xj0YkiwygfNOUzf39YtMVTc7UQ==", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^14.20.0 || ^16.13.0 || >=18.10.0" + }, + "peerDependencies": { + "@angular/core": "15.2.7", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/forms": { "version": "15.2.7", "license": "MIT", @@ -6457,46 +6476,65 @@ } }, "node_modules/@onecx/accelerator": { - "version": "4.31.0", - "resolved": "https://registry.npmjs.org/@onecx/accelerator/-/accelerator-4.31.0.tgz", - "integrity": "sha512-6lykcpubzohBB0Q/dI1kp/UhyJmPkVRCtKodCAUtUxssLP81lTioh8+ePMKAvXXmiRsiiE9kuyw7jeWRVNIxGQ==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/accelerator/-/accelerator-4.42.0.tgz", + "integrity": "sha512-Kq+cE5BwE49/ZTgOBL94TV6jzlaXuBkw90mCdmkC6J0xRXKAtlzv40FrtfTUGBJ6/Pd5G/Y/ZZvHHb6BF5MEbQ==", "peerDependencies": { "rxjs": "7.8.1", "tslib": "^2.3.0" } }, "node_modules/@onecx/angular-accelerator": { - "version": "4.31.0", - "resolved": "https://registry.npmjs.org/@onecx/angular-accelerator/-/angular-accelerator-4.31.0.tgz", - "integrity": "sha512-7FAcd1u172WDgmM2oC67F3apKKxthx923uNEKQBEHbtIsditQFlCFfq8/7BZsckBFVuF+qHjR8GJ8UVlOCsXUA==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/angular-accelerator/-/angular-accelerator-4.42.0.tgz", + "integrity": "sha512-uGRB0U3D2wNE7OvKqPObE5RgsP9mcBxk1QuNqUBJbVwzmJ5A0PzSA6R7loa2mVqrDwp3C+qF28W3WDRadp8n9w==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/cdk": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/common": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/core": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/forms": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/platform-browser": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/router": "^15.2.7 || ^16.0.0 || ^17.0.0", + "@angular/cdk": "^15.2.7", + "@angular/common": "^15.2.7", + "@angular/core": "^15.2.7", + "@angular/forms": "^15.2.7", + "@angular/platform-browser": "^15.2.7", + "@angular/router": "^15.2.7", + "@ngneat/until-destroy": "^9.2.2", "@ngx-translate/core": "^14.0.0", "@onecx/angular-integration-interface": "^4", "@onecx/integration-interface": "^4", "chart.js": "^4.4.0", "d3-scale-chromatic": "^3.0.0", - "primeng": "^15.0.0 || ^16.0.0 || ^17.0.0", + "primeng": "^15.0.0", + "rxjs": "~7.8.0" + } + }, + "node_modules/@onecx/angular-auth": { + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/angular-auth/-/angular-auth-4.42.0.tgz", + "integrity": "sha512-VBN7XTAKQxgBuwvDwJoN6/Yl5y4VlV+C1xpRXBksIpMQmyBBc/Q7bnx1/xcwUXgU70ftWCMFF4DjSpP4pci4Rg==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular-architects/module-federation": "^15.0.0", + "@angular/common": "^15.2.7", + "@angular/core": "^15.2.7", + "@onecx/angular-integration-interface": "^4", + "@onecx/integration-interface": "^4", + "keycloak-angular": "^13.0.0", + "keycloak-js": "^18.0.0", "rxjs": "~7.8.0" } }, "node_modules/@onecx/angular-integration-interface": { - "version": "4.31.0", - "resolved": "https://registry.npmjs.org/@onecx/angular-integration-interface/-/angular-integration-interface-4.31.0.tgz", - "integrity": "sha512-yhpJCQf4yLZBavm7dYO+iWXIquznuhHpdJIuZjeixyL+GSVEKwopl2JGV2i1jn2PxhIspnk9SRqnqKED67dxKA==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/angular-integration-interface/-/angular-integration-interface-4.42.0.tgz", + "integrity": "sha512-PdOJMzSalZxjfEbwDIbcOQhCLDBoXPzwuN9JYUyF4n3IenbNJZmOODCNgWo4Kf9/84tJfalemoX+JnmHNQoo/g==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/core": "^15.2.7 || ^16.0.0 || ^17.0.0", + "@angular/core": "^15.2.7", "@onecx/integration-interface": "~4", "rxjs": "~7.8.0" } @@ -6512,10 +6550,27 @@ "primeng": "^15.2.1" } }, + "node_modules/@onecx/angular-webcomponents": { + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/angular-webcomponents/-/angular-webcomponents-4.42.0.tgz", + "integrity": "sha512-VeooxAtnfUr4lEonO1JzA4SOpHkp5mxvhRXd2b8tFrIIwzlsLSLrD7TninGQ5+Bn0KXURCyIeamYAiF5B+Sh0g==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": "^15.2.7", + "@angular/elements": "^15.2.7", + "@angular/platform-browser": "^15.2.7", + "@angular/router": "^15.2.7", + "@onecx/accelerator": "^4", + "@onecx/portal-integration-angular": "^4", + "rxjs": "~7.8.0" + } + }, "node_modules/@onecx/integration-interface": { - "version": "4.31.0", - "resolved": "https://registry.npmjs.org/@onecx/integration-interface/-/integration-interface-4.31.0.tgz", - "integrity": "sha512-u1y0Ev2KevLEA0AC+1vz37D1rpRi8fxoXB0QHIo1PMx+bMnLQ2ISWReDN5rnA1tY1RuXUiUw7scJLtyns1txFw==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/integration-interface/-/integration-interface-4.42.0.tgz", + "integrity": "sha512-dXpbxEU4xaln+ABI5DACYGvMnkYHJw6O85YJjhVANYqCERvK5im5wCaP54IFmdFneBKskLYByHUqRzu8Qhs8Xw==", "peerDependencies": { "@onecx/accelerator": "^4", "rxjs": "7.8.1", @@ -6523,42 +6578,42 @@ } }, "node_modules/@onecx/keycloak-auth": { - "version": "4.31.0", - "resolved": "https://registry.npmjs.org/@onecx/keycloak-auth/-/keycloak-auth-4.31.0.tgz", - "integrity": "sha512-MeYdeHVJxH39Ump52BAVt6tLy6aggrFNHDptq4itBfM+PfRMeJqZ/Uplpox1estQY4iYL5Q0mxqh1zTfz2mdZA==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/keycloak-auth/-/keycloak-auth-4.42.0.tgz", + "integrity": "sha512-MQF5gpGFf//w6zZrTt2CmRkbWyGATsl279y3MlLp4UkvPFanD5d1wNFE2MKbqKmO03oftOezWM1lzaMgQ5xK4Q==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/common": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/core": "^15.2.7 || ^16.0.0 || ^17.0.0", + "@angular/common": "^15.2.7", + "@angular/core": "^15.2.7", "@onecx/angular-integration-interface": "^4", "@onecx/integration-interface": "^4", - "keycloak-angular": "^13.0.0 || ^14.0.0 || ^15.0.0", + "keycloak-angular": "^13.0.0", "keycloak-js": "^18.0.0", "rxjs": "~7.8.0" } }, "node_modules/@onecx/portal-integration-angular": { - "version": "4.31.0", - "resolved": "https://registry.npmjs.org/@onecx/portal-integration-angular/-/portal-integration-angular-4.31.0.tgz", - "integrity": "sha512-OO2Tvz7glkZfjEZUFY+5iCC6V8b0cWM3EtYaJaRe2S8PPi4Lk4AVT4Lj9GklW9O7cEy365sGeOfKxGwNTeFKKA==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/portal-integration-angular/-/portal-integration-angular-4.42.0.tgz", + "integrity": "sha512-zVJlDgTsFixZ8GYvMIJ700Tz/ebahYN+Mt44Ge+6bQa4bes15vo22eTZ5fPtGFYh8x+gGsR/2bEkroKKyNeTNg==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@angular-architects/module-federation": "^15.0.0 || ^16.0.0 || ^17.0.0", - "@angular/animations": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/cdk": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/common": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/core": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/forms": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/platform-browser": "^15.2.7 || ^16.0.0 || ^17.0.0", - "@angular/router": "^15.2.7 || ^16.0.0 || ^17.0.0", + "@angular-architects/module-federation": "^15.0.0", + "@angular/animations": "^15.2.7", + "@angular/cdk": "^15.2.7", + "@angular/common": "^15.2.7", + "@angular/core": "^15.2.7", + "@angular/forms": "^15.2.7", + "@angular/platform-browser": "^15.2.7", + "@angular/router": "^15.2.7", "@ngneat/until-destroy": "^9.2.2", - "@ngrx/effects": "^15.0.0 || ^16.0.0 || ^17.0.0", - "@ngrx/router-store": "^15.0.0 || ^16.0.0 || ^17.0.0", - "@ngrx/store": "^15.0.0 || ^16.0.0 || ^17.0.0", + "@ngrx/effects": "^15.0.0", + "@ngrx/router-store": "^15.0.0", + "@ngrx/store": "^15.0.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "@onecx/angular-accelerator": "^4", @@ -6567,15 +6622,15 @@ "@onecx/integration-interface": "^4", "fast-deep-equal": "^3.1.3", "msw": "^1.3.2", - "primeng": "^15.0.0 || ^16.0.0 || ^17.0.0", + "primeng": "^15.0.0", "rxjs": "~7.8.0", "zod": "^3.22.1" } }, "node_modules/@onecx/portal-layout-styles": { - "version": "4.31.0", - "resolved": "https://registry.npmjs.org/@onecx/portal-layout-styles/-/portal-layout-styles-4.31.0.tgz", - "integrity": "sha512-bNDatgnALXEm6QnWY5u4wQPG2ROiKQdhfVDT5CddkkVZMURe8ETxAZWibNNNimH1IbXcBN5CBBIVeuVZIVTd/Q==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/@onecx/portal-layout-styles/-/portal-layout-styles-4.42.0.tgz", + "integrity": "sha512-REw28qQgA3v8V+sVIipO86RH6wP8o2CpOSzd5k+ffQjh1JXXgiVCthndqRGZMCCxgoJAWbF1Y0iU2+PPJWUxcA==", "peerDependencies": { "tslib": "^2.5.0" } @@ -10932,6 +10987,11 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@webcomponents/webcomponentsjs": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.8.0.tgz", + "integrity": "sha512-loGD63sacRzOzSJgQnB9ZAhaQGkN7wl2Zuw7tsphI5Isa0irijrRo6EnJii/GgjGefIFO8AIO7UivzRhFaEk9w==" + }, "node_modules/@xmldom/xmldom": { "version": "0.8.10", "license": "MIT", diff --git a/package.json b/package.json index c28ee21..78e1c39 100644 --- a/package.json +++ b/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", @@ -51,13 +52,16 @@ "@ngrx/router-store": "^15.4.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", - "@onecx/accelerator": "^4.30.1", - "@onecx/angular-accelerator": "^4.30.1", - "@onecx/integration-interface": "^4.30.1", - "@onecx/angular-integration-interface": "^4.30.1", - "@onecx/keycloak-auth": "^4.30.1", - "@onecx/portal-integration-angular": "^4.30.1", - "@onecx/portal-layout-styles": "^4.30.1", + "@onecx/accelerator": "^4.42.0", + "@onecx/angular-accelerator": "^4.42.0", + "@onecx/angular-auth": "^4.42.0", + "@onecx/angular-webcomponents": "^4.42.0", + "@onecx/integration-interface": "^4.42.0", + "@onecx/angular-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", "keycloak-angular": "^13.1.0", "file-saver": "^2.0.5", "ngx-color": "^8.0.3", diff --git a/src/app/app-entrypoint.component.html b/src/app/app-entrypoint.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/src/app/app-entrypoint.component.html @@ -0,0 +1 @@ + diff --git a/src/app/app-entrypoint.component.ts b/src/app/app-entrypoint.component.ts new file mode 100644 index 0000000..de82f4c --- /dev/null +++ b/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 {} diff --git a/src/app/onecx-product-store-remote.module.ts b/src/app/onecx-product-store-remote.module.ts index cf12835..3d5fcca 100644 --- a/src/app/onecx-product-store-remote.module.ts +++ b/src/app/onecx-product-store-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('./product-store/product-store.module').then((m) => m.ProductStoreModule) } ] @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 OneCXProductStoreModule { - constructor() { +export class OneCXProductStoreModule implements DoBootstrap { + constructor(private injector: Injector) { console.info('OneCX Product Store Module constructor') } + + ngDoBootstrap(): void { + createAppEntrypoint(AppEntrypointComponent, 'ocx-product-store-component', this.injector) + } } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 70b9492..ec2b771 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -22,23 +22,11 @@ import { TableModule } from 'primeng/table' import { TabViewModule } from 'primeng/tabview' import { ToastModule } from 'primeng/toast' -import { - AppStateService, - ConfigurationService, - PortalDialogService, - PortalApiConfiguration, - PortalCoreModule -} from '@onecx/portal-integration-angular' +import { PortalDialogService, PortalCoreModule } from '@onecx/portal-integration-angular' -import { Configuration } from 'src/app/shared/generated' -import { environment } from 'src/environments/environment' import { LabelResolver } from './label.resolver' import { ImageContainerComponent } from './image-container/image-container.component' -export function apiConfigProvider(configService: ConfigurationService, appStateService: AppStateService) { - return new PortalApiConfiguration(Configuration, environment.apiPrefix, configService, appStateService) -} - @NgModule({ declarations: [ImageContainerComponent], imports: [ @@ -109,12 +97,7 @@ export function apiConfigProvider(configService: ConfigurationService, appStateS TranslateModule ], //this is not elegant, for some reason the injection token from primeng does not work across federated module - providers: [ - ConfirmationService, - LabelResolver, - { provide: DialogService, useClass: PortalDialogService }, - { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] } - ], + providers: [ConfirmationService, LabelResolver, { provide: DialogService, useClass: PortalDialogService }], schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA] }) export class SharedModule {} diff --git a/src/bootstrap.ts b/src/bootstrap.ts index 4d4077a..82299bb 100644 --- a/src/bootstrap.ts +++ b/src/bootstrap.ts @@ -1,13 +1,5 @@ -import { enableProdMode } from '@angular/core' -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' -import { AppModule } from './app/app.module' +import { environment } from 'src/environments/environment' +import { OneCXProductStoreModule } from './app/onecx-product-store-remote.module' +import { bootstrapModule } from '@onecx/angular-webcomponents' -import { environment } from './environments/environment' - -if (environment.production) { - enableProdMode() -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)) +bootstrapModule(OneCXProductStoreModule, 'microfrontend', environment.production) diff --git a/webpack.config.js b/webpack.config.js index 70901d3..bd1b11c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,7 +5,7 @@ const config = withModuleFederationPlugin({ name: 'onecx-product-store-ui', filename: 'remoteEntry.js', exposes: { - './OneCXProductStoreModule': 'src/app/onecx-product-store-remote.module.ts' + './OneCXProductStoreModule': 'src/bootstrap.ts' }, shared: share({ '@angular/core': { singleton: true, requiredVersion: 'auto' }, @@ -46,5 +46,17 @@ const plugins = config.plugins.filter((plugin) => !(plugin instanceof ModifyEntr module.exports = { ...config, - plugins + plugins, + output: { + uniqueName: 'onecx-product-store-ui', + publicPath: 'auto' + }, + experiments: { + ...config.experiments, + topLevelAwait: true + }, + optimization: { + runtimeChunk: false, + splitChunks: false + } }