fix(theme-loading): copy and load theme correctly and fix routing

.github/workflows/deploy-pages.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Enable Brand Theme in Angular Starter
         run: |
           cd ./apps/angular-starter
-          sed -i "s/BRAND_THEME: false/BRAND_THEME: true/" src/environments/environments.ts
+          sed -i "s/BRAND_THEME: false/BRAND_THEME: true/" src/environments/environment.ts
 
       - name: Build Angular Starter
         run: pnpm --filter ix-angular-starter run build --base-href /ix-starter/angular-starter/

apps/angular-starter/e2e/devices.e2e.ts

@@ -23,13 +23,13 @@ async function filterDevicePageByDeviceName(page: Page, filterBy: string, filter
 }
 
 test('should display the devices table', async ({ page }) => {
-    await page.goto("http://localhost:4200/devices");
+    await page.goto("http://localhost:4200/#/devices");
     await expect(page.locator('ag-grid-angular')).toBeVisible();
 });
 
 
 test('should expand a device row on click', async ({ page }) => {
-    await page.goto("http://localhost:4200/devices");
+    await page.goto("http://localhost:4200/#/devices");
     const firstRow = page.locator('.ag-center-cols-container .ag-row').first();
     await firstRow.click();
     // Check for expanded details (adjust selector as needed)
@@ -38,7 +38,7 @@ test('should expand a device row on click', async ({ page }) => {
 
 
 test("should filter devices by deviceName", async ({ page }) => {
-    await page.goto("http://localhost:4200/devices");
+    await page.goto("http://localhost:4200/#/devices");
 
     const aggrid = page.locator(".ag-root-wrapper");
     const rows = aggrid.locator(".ag-center-cols-container .ag-row");
@@ -57,7 +57,7 @@ test("should filter devices by deviceName", async ({ page }) => {
 });
 
 test('should filter devices by status', async ({ page }) => {
-    await page.goto("http://localhost:4200/devices");
+    await page.goto("http://localhost:4200/#/devices");
 
     const aggrid = page.locator(".ag-root-wrapper");
     const rows = aggrid.locator(".ag-center-cols-container .ag-row");

apps/angular-starter/scripts/copy-theme.mjs

@@ -1,13 +1,42 @@
 import fs from "fs-extra";
 import path from "path";
+import { fileURLToPath } from "url";
+import { createRequire } from "module";
 
-try {
-  const themePackage = import.meta.resolve("@siemens-ix/corporate-theme");
-  const theme = path.join(themePackage, "..", "..");
-  fs.copySync(theme, path.join(__dirname, "../src/assets/theme"), {
-    filter: (src) => !src.includes("corporate-theme-alternative/node_modules"),
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const THEME_PACKAGE = "@siemens-ix/corporate-theme";
+const TARGET_DIR = path.join(__dirname, "../src/assets/theme");
+
+function findThemePackage() {
+  const require = createRequire(import.meta.url);
+  try {
+    const packageJsonPath = require.resolve(`${THEME_PACKAGE}/package.json`);
+    const themePath = path.dirname(packageJsonPath);
+    console.log(`✓ Found theme at: ${themePath}`);
+    return themePath;
+  } catch (error) {
+    return null;
+  }
+}
+
+function copyTheme(sourcePath, targetPath) {
+  fs.copySync(sourcePath, targetPath, {
+    overwrite: true,
+    filter: (src) => !src.includes("node_modules"),
   });
-  console.log("Load additional theme");
-} catch (e) {
-  console.log("No additional theme found", e);
+  console.log(`✓ Theme copied to: ${targetPath}`);
+}
+
+try {
+  const themePath = findThemePackage();
+
+  if (!themePath) {
+    console.log("ℹ No theme found - using default");
+    process.exit(0);
+  }
+
+  copyTheme(themePath, TARGET_DIR);
+} catch (error) {
+  console.error(`Error: ${error.message}`);
+  process.exit(1);
 }

apps/angular-starter/src/app/app.config.ts

@@ -3,7 +3,7 @@ import {
   importProvidersFrom,
   provideZoneChangeDetection,
 } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withHashLocation } from '@angular/router';
 import { IxModule } from '@siemens/ix-angular';
 
 import { routes } from './app.routes';
@@ -19,7 +19,7 @@ export function HttpLoaderFactory(http: HttpClient) {
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, withHashLocation()),
     provideHttpClient(),
     importProvidersFrom(
       BrowserModule,

apps/angular-starter/src/app/pages/settings/settings/settings.component.ts

@@ -7,7 +7,7 @@ import {
 import { TranslateModule } from '@ngx-translate/core';
 import { useShowDemoMessage } from '../../../shared/utlis';
 import { SharedService } from '../../../shared/services/shared.service';
-import { environment } from '../../../../environments/environments';
+import { environment } from '../../../../environments/environment';
 import { themeSwitcher } from '@siemens/ix';
 import { Subscription } from 'rxjs';
 

apps/angular-starter/src/main.ts

@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
-import { environment } from './environments/environments';
+import { environment } from './environments/environment';
 import { getIxTheme } from '@siemens/ix-aggrid';
 import * as agGrid from 'ag-grid-community';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';