From 743676bcfdfb2204e854cbeb3507e09e4c2a1c5d Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Fri, 14 Aug 2026 17:26:42 +0200
Subject: [PATCH] build: share example routes with web components

---
 src/app/app.component.html                    |  2 +-
 .../{app-routing.module.ts => app.routes.ts}  |  8 ++-
 src/main.ts                                   |  2 +-
 src/main.web-components.ts                    | 56 +++++++------------
 4 files changed, 28 insertions(+), 40 deletions(-)
 rename src/app/{app-routing.module.ts => app.routes.ts} (98%)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index d84d011d22..475a15a66c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -21,7 +21,7 @@ <h4>Documentation</h4>
         <h4>Basic</h4>
         <ul>
           <li>
-            <a routerLink="10k-rows">10k Rows</a>
+            <a routerLink="ten-k-rows">10k Rows</a>
           </li>
           <li>
             <a routerLink="full-screen">Full Screen</a>
diff --git a/src/app/app-routing.module.ts b/src/app/app.routes.ts
similarity index 98%
rename from src/app/app-routing.module.ts
rename to src/app/app.routes.ts
index f3ca551a7f..7108e17ba6 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app.routes.ts
@@ -1,15 +1,21 @@
 import { Routes } from '@angular/router';
 
+// Route paths must match their component selectors without the `-demo` suffix.
 export const routes: Routes = [
   {
     path: '',
+    redirectTo: 'fluid-row-height',
+    pathMatch: 'full'
+  },
+  {
+    path: 'fluid-row-height',
     data: { title: 'Fluid Row Height', sourcePath: 'basic/fluid-row-height.component.ts' },
     loadComponent: () =>
       import('./basic/fluid-row-height.component').then(c => c.FluidRowHeightComponent)
   },
   // Basic
   {
-    path: '10k-rows',
+    path: 'ten-k-rows',
     data: { title: '10k Rows', sourcePath: 'basic/10k-rows.component.ts' },
     loadComponent: () => import('./basic/10k-rows.component').then(c => c.TenKRowsComponent)
   },
diff --git a/src/main.ts b/src/main.ts
index 34e7a2eb6e..e4b94c5494 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,8 +4,8 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter, withHashLocation } from '@angular/router';
 import { providedNgxDatatableConfig } from '@siemens/ngx-datatable';
 
-import { routes } from './app/app-routing.module';
 import { AppComponent } from './app/app.component';
+import { routes } from './app/app.routes';
 
 bootstrapApplication(AppComponent, {
   providers: [
diff --git a/src/main.web-components.ts b/src/main.web-components.ts
index 7c18d221f0..50c04aa242 100644
--- a/src/main.web-components.ts
+++ b/src/main.web-components.ts
@@ -9,8 +9,15 @@ import { createCustomElement } from '@angular/elements';
 import { createApplication } from '@angular/platform-browser';
 import { providedNgxDatatableConfig } from '@siemens/ngx-datatable';
 
+import { routes } from './app/app.routes';
 import { DATA_ASSETS_URL } from './app/data.service';
 
+const exampleLoaders = new Map(
+  routes.flatMap(route =>
+    route.path && route.loadComponent ? [[route.path, route.loadComponent] as const] : []
+  )
+);
+
 declare global {
   interface Window {
     loadDatatableExample(example: string): Promise<void>;
@@ -27,44 +34,19 @@ createApplication({
 })
   .then(appRef => {
     window.loadDatatableExample = async example => {
-      switch (example) {
-        case 'fluid-row-height': {
-          registerExample(
-            'ngx-datatable-fluid-row-height',
-            await import('./app/basic/fluid-row-height.component').then(
-              c => c.FluidRowHeightComponent
-            ),
-            appRef
-          );
-          return;
-        }
-        case 'standard-column': {
-          registerExample(
-            'ngx-datatable-standard-column',
-            await import('./app/columns/fixed-column.component').then(c => c.FixedColumnComponent),
-            appRef
-          );
-          return;
-        }
-        case 'flex-column': {
-          registerExample(
-            'ngx-datatable-flex-column',
-            await import('./app/columns/flex-column.component').then(c => c.FlexColumnComponent),
-            appRef
-          );
-          return;
-        }
-        case 'force-column': {
-          registerExample(
-            'ngx-datatable-force-column',
-            await import('./app/columns/force-column.component').then(c => c.ForceColumnComponent),
-            appRef
-          );
-          return;
-        }
-        default:
-          throw new Error(`Unknown datatable example: ${example}`);
+      const loadComponent = exampleLoaders.get(example);
+      if (!loadComponent) {
+        throw new Error(`Unknown datatable example: ${example}`);
+      }
+
+      const componentPromise = loadComponent();
+      if (!(componentPromise instanceof Promise)) {
+        throw new Error(`Invalid datatable example component: ${example}`);
       }
+
+      const componentResult = await componentPromise;
+      const component = 'default' in componentResult ? componentResult.default : componentResult;
+      registerExample(`ngx-datatable-${example}`, component, appRef);
     };
 
     window.dispatchEvent(new Event('ngx-datatable-examples-ready'));