New starter apps

[danielleroux]

Integrate new ix starter apps for angular, react and vue.

[gemini-code-assist]

Code Review

This pull request refactors and updates the Angular, React, and Vue starter templates to use the latest versions of Siemens iX (v5) and other core dependencies, while streamlining the project structures and migrating tests to Vitest. The code review feedback focuses on improving the Angular starter by leveraging the built-in routerLinkActive directive instead of a custom route-matching helper, which simplifies the main application component. Additionally, the feedback recommends removing unused imports in the configuration files and implementing safer null/undefined checks when handling form input events in both the Angular and Vue starters.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Instead of using a custom isActiveRoute helper method with manual URL string matching, we can leverage Angular's built-in routerLinkActive directive. This is more robust, handles query parameters/hash locations automatically, and simplifies the component code.

    <a routerLink="" routerLinkActive #rlaHome="routerLinkActive" [routerLinkActiveOptions]="{exact: true}" tabindex="-1">
      <ix-menu-item [icon]="icons.iconHome" [active]="rlaHome.isActive">
        Get Started
      </ix-menu-item>
    </a>
    <a routerLink="forms" routerLinkActive #rlaForms="routerLinkActive" tabindex="-1">
      <ix-menu-item [icon]="icons.iconTextDocument" [active]="rlaForms.isActive">
        Forms
      </ix-menu-item>
    </a>
    <a routerLink="charts" routerLinkActive #rlaCharts="routerLinkActive" tabindex="-1">
      <ix-menu-item [icon]="icons.iconPiechart" [active]="rlaCharts.isActive">
        Charts
      </ix-menu-item>
    </a>
    <a routerLink="grids" routerLinkActive #rlaGrids="routerLinkActive" tabindex="-1">
      <ix-menu-item [icon]="icons.iconTable" [active]="rlaGrids.isActive">
        Grids
      </ix-menu-item>
    </a>

[gemini-code-assist]

With the adoption of routerLinkActive in the template, we can clean up the component by removing the Router dependency, the constructor, and the custom isActiveRoute method. We also need to import and add RouterLinkActive to the component's imports array.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import {
  IxApplication,
  IxApplicationHeader,
  IxAvatar,
  IxContent,
  IxMenu,
  IxMenuItem,
} from '@siemens/ix-angular/standalone';
import { CompanyLogoComponent } from './../components/company-logo/company-logo.component';
import { iconHome, iconPiechart, iconTable, iconTextDocument } from '@siemens/ix-icons/icons';

@Component({
  selector: 'app-root',
  imports: [
    CommonModule,
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
    IxApplication,
    IxApplicationHeader,
    IxAvatar,
    IxMenu,
    IxMenuItem,
    IxContent,
  ],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {

  readonly icons = {
    iconHome,
    iconTextDocument,
    iconPiechart,
    iconTable
  } as const;

  protected readonly companyLogoComponent = CompanyLogoComponent;
}

[gemini-code-assist]

The ErrorHandler import is unused in this configuration file and can be safely removed.

Suggested change

	import { ApplicationConfig, provideZoneChangeDetection, ErrorHandler } from '@angular/core';
	import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';

[gemini-code-assist]

The imports for addIcons and the individual icons are unused in main.ts and can be safely removed.

Suggested change

	import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
	import { addIcons } from '@siemens/ix-icons';
	import { iconHome, iconPiechart, iconTextDocument, iconTable, iconQuestion } from '@siemens/ix-icons/icons';
	import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';

[gemini-code-assist]

To prevent potential runtime type issues or strict null check errors if event.detail is null or undefined, use a nullish coalescing operator to fall back to an empty string.

Suggested change

	onInspectionTypeChange(event: CustomEvent<string | string[]>) {
	const value = event.detail;
	this.inspectionType = Array.isArray(value) ? value[0] || '' : value;
	}
	onInspectionTypeChange(event: CustomEvent<string | string[]>) {
	const value = event.detail;
	this.inspectionType = Array.isArray(value) ? value[0] || '' : (value ?? '');
	}

[gemini-code-assist]

Using String($event.detail) directly will convert null or undefined values to the literal strings "null" or "undefined". It is safer to check if the detail exists before converting it to a string.

      @value-change="inspectionType = $event.detail ? String($event.detail) : ''"