feat(angular): use angular 19 BREAKING CHANGE: requires angular@19

.gitignore

@@ -8,6 +8,11 @@ apps/**/dist
 apps/**/coverage
 /out-tsc
 
+#eslint cache
+libs/aws/.eslintcache
+libs/components/.eslintcache
+libs/core/.eslintcache
+.eslintcache
 # dependencies
 /node_modules
 

angular.json

@@ -66,11 +66,12 @@
       "prefix": "sg",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "apps/styleguide/dist",
+            "outputPath": {
+              "base": "apps/styleguide/dist"
+            },
             "index": "apps/styleguide/src/index.html",
-            "main": "apps/styleguide/src/main.ts",
             "tsConfig": "apps/styleguide/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "polyfills": [
@@ -83,16 +84,15 @@
             "styles": [
               "apps/styleguide/src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "apps/styleguide/src/main.ts"
           },
           "configurations": {
             "production": {
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -166,17 +166,14 @@
       "displayBlock": true,
       "changeDetection": "OnPush",
       "viewEncapsulation": "None",
-      "skipTests": true,
-      "standalone": true
+      "skipTests": true
     },
     "@schematics/angular:directive": {
       "prefix": "sc",
-      "skipTests": true,
-      "standalone": true
+      "skipTests": true
     },
     "@schematics/angular:pipe": {
-      "skipTests": true,
-      "standalone": true
+      "skipTests": true
     },
     "@schematics/angular:service": {
       "skipTests": true

apps/styleguide/src/app/app.component.html

@@ -2,9 +2,11 @@
 <div class="app">
   <nav class="app__nav">
     <ul>
-      <li *ngFor="let link of navItems">
-        <a [routerLink]="[basePath, link.path]">{{link.title}}</a>
-      </li>
+      @for (link of navItems; track link) {
+        <li>
+          <a [routerLink]="[basePath, link.path]">{{link.title}}</a>
+        </li>
+      }
     </ul>
   </nav>
   <div class="app__content">

apps/styleguide/src/app/app.component.ts

@@ -1,17 +1,16 @@
-import { NgFor } from '@angular/common'
+
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink, RouterOutlet } from '@angular/router'
 import { FlyingFocusComponent } from '@shiftcode/ngx-components'
 import { ClientIdService, Logger, LoggerService } from '@shiftcode/ngx-core'
 import { SUB_ROUTES } from '../routes/routes.const'
 
 @Component({
-  selector: 'sg-root',
-  standalone: true,
-  imports: [NgFor, RouterLink, RouterOutlet, FlyingFocusComponent],
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-root',
+    imports: [RouterLink, RouterOutlet, FlyingFocusComponent],
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
   protected readonly basePath = 'styleguide'

apps/styleguide/src/routes/sg-autofocus/sg-autofocus.component.ts

@@ -2,12 +2,11 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { AutoFocusDirective } from '@shiftcode/ngx-components'
 
 @Component({
-  selector: 'sg-sg-autofocus',
-  templateUrl: './sg-autofocus.component.html',
-  styleUrls: ['./sg-autofocus.component.scss'],
-  standalone: true,
-  imports: [AutoFocusDirective],
-  encapsulation: ViewEncapsulation.Emulated,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-sg-autofocus',
+    templateUrl: './sg-autofocus.component.html',
+    styleUrls: ['./sg-autofocus.component.scss'],
+    imports: [AutoFocusDirective],
+    encapsulation: ViewEncapsulation.Emulated,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgAutofocusComponent {}

apps/styleguide/src/routes/sg-button/sg-button.component.ts

@@ -3,12 +3,11 @@ import { ChangeDetectionStrategy, Component, Inject, OnDestroy, Optional } from
 import { ButtonComponent, SvgComponent, TooltipDirective } from '@shiftcode/ngx-components'
 
 @Component({
-  selector: 'sg-button',
-  standalone: true,
-  imports: [ButtonComponent, SvgComponent, TooltipDirective],
-  templateUrl: './sg-button.component.html',
-  styleUrls: ['./sg-button.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-button',
+    imports: [ButtonComponent, SvgComponent, TooltipDirective],
+    templateUrl: './sg-button.component.html',
+    styleUrls: ['./sg-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgButtonComponent implements OnDestroy {
   counter1 = 0

apps/styleguide/src/routes/sg-click-outside/sg-click-outside.component.ts

@@ -3,16 +3,15 @@ import { ClickOutsideDirective, SvgComponent } from '@shiftcode/ngx-components'
 import { LoggerService } from '@shiftcode/ngx-core'
 
 @Component({
-  selector: 'sg-click-outside',
-  standalone: true,
-  imports: [
-    ClickOutsideDirective,
-    SvgComponent,
-  ],
-  templateUrl: './sg-click-outside.component.html',
-  styleUrls: ['./sg-click-outside.component.scss'],
-  encapsulation: ViewEncapsulation.Emulated,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-click-outside',
+    imports: [
+        ClickOutsideDirective,
+        SvgComponent,
+    ],
+    templateUrl: './sg-click-outside.component.html',
+    styleUrls: ['./sg-click-outside.component.scss'],
+    encapsulation: ViewEncapsulation.Emulated,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgClickOutsideComponent {
   protected disabled = false

apps/styleguide/src/routes/sg-local-storage/sg-local-storage.component.html

@@ -11,10 +11,12 @@ <h3>Add Key-Value to LS</h3>
 
 <h3>Keys</h3>
 <ul>
-  <li *ngFor="let key of ls.keys()">
-    <strong>{{key}}</strong>
-    <button type="button" (click)="ls.delete(key)">delete</button>
-  </li>
+  @for (key of ls.keys(); track key) {
+    <li>
+      <strong>{{key}}</strong>
+      <button type="button" (click)="ls.delete(key)">delete</button>
+    </li>
+  }
 </ul>
 
 

apps/styleguide/src/routes/sg-local-storage/sg-local-storage.component.ts

@@ -1,16 +1,15 @@
-import { NgForOf } from '@angular/common'
+
 import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core'
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'
 import { LocalStorage, LoggerService } from '@shiftcode/ngx-core'
 
 @Component({
-  selector: 'sg-sg-local-storage',
-  standalone: true,
-  imports: [NgForOf, ReactiveFormsModule],
-  templateUrl: './sg-local-storage.component.html',
-  styleUrls: ['./sg-local-storage.component.scss'],
-  encapsulation: ViewEncapsulation.Emulated,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-sg-local-storage',
+    imports: [ReactiveFormsModule],
+    templateUrl: './sg-local-storage.component.html',
+    styleUrls: ['./sg-local-storage.component.scss'],
+    encapsulation: ViewEncapsulation.Emulated,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgLocalStorageComponent {
   readonly grp = new FormGroup({

apps/styleguide/src/routes/sg-rx/sg-rx.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe, JsonPipe, NgIf } from '@angular/common'
+import { JsonPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'
 import { AutoFocusDirective, RxIfDirective, RxLetDirective } from '@shiftcode/ngx-components'
 import { Observable, ReplaySubject, Subject } from 'rxjs'
@@ -9,14 +9,15 @@ class TestObsController {
     return this._value$
   }
 
-  private _value$: Observable<number>|null
+  private _value$: Observable<number> | null
   private valueSubject: Subject<number>
   private _needsNewObservable = true
 
-  setNull(){
+  setNull() {
     this._needsNewObservable = true
     this._value$ = null
   }
+
   setNewEmpty() {
     this.setObservable(new Subject())
   }
@@ -64,8 +65,7 @@ class TestObsController {
 
 @Component({
   selector: 'sg-sc-rx',
-  standalone: true,
-  imports: [NgIf, AsyncPipe, JsonPipe, AutoFocusDirective, RxLetDirective, RxIfDirective],
+  imports: [JsonPipe, AutoFocusDirective, RxLetDirective, RxIfDirective],
   templateUrl: './sg-rx.component.html',
   styleUrls: ['./sg-rx.component.scss'],
   encapsulation: ViewEncapsulation.Emulated,

apps/styleguide/src/routes/sg-smooth-height/sg-smooth-height.component.ts

@@ -2,12 +2,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { SmoothHeightComponent } from '@shiftcode/ngx-components'
 
 @Component({
-  selector: 'sg-smooth-height',
-  standalone: true,
-  imports: [SmoothHeightComponent],
-  templateUrl: './sg-smooth-height.component.html',
-  styleUrls: ['./sg-smooth-height.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-smooth-height',
+    imports: [SmoothHeightComponent],
+    templateUrl: './sg-smooth-height.component.html',
+    styleUrls: ['./sg-smooth-height.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgSmoothHeightComponent {
   content = ''

apps/styleguide/src/routes/sg-svg/sg-svg.component.ts

@@ -2,12 +2,11 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { SvgComponent } from '@shiftcode/ngx-components'
 
 @Component({
-  selector: 'sg-sg-icon',
-  standalone: true,
-  imports: [SvgComponent],
-  templateUrl: './sg-svg.component.html',
-  styleUrls: ['./sg-svg.component.scss'],
-  encapsulation: ViewEncapsulation.Emulated,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-sg-icon',
+    imports: [SvgComponent],
+    templateUrl: './sg-svg.component.html',
+    styleUrls: ['./sg-svg.component.scss'],
+    encapsulation: ViewEncapsulation.Emulated,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgSvgComponent {}

apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-1/sg-test-page-sub-1.component.ts

@@ -1,15 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { RouterLink } from '@angular/router'
 import { sgTestPageCreateQueryParams } from '../sg-test-page-create-query-params.function'
-import { SgTestRouteQueryParams } from '../sg-test-route-query-params.enum'
 
 @Component({
-  selector: 'sg-test-page-sub-2',
-  standalone: true,
-  imports: [RouterLink],
-  templateUrl: './sg-test-page-sub-1.component.html',
-  styleUrls: ['./sg-test-page-sub-1.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-test-page-sub-2',
+    imports: [RouterLink],
+    templateUrl: './sg-test-page-sub-1.component.html',
+    styleUrls: ['./sg-test-page-sub-1.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgTestPageSub1Component {
   protected readonly qp = sgTestPageCreateQueryParams

apps/styleguide/src/routes/sg-test-page/sg-test-page-sub-2/sg-test-page-sub-2.component.ts

@@ -3,12 +3,11 @@ import { RouterLink } from '@angular/router'
 import { sgTestPageCreateQueryParams } from '../sg-test-page-create-query-params.function'
 
 @Component({
-  selector: 'sg-test-page-sub-2',
-  standalone: true,
-  imports: [RouterLink],
-  templateUrl: './sg-test-page-sub-2.component.html',
-  styleUrls: ['./sg-test-page-sub-2.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-test-page-sub-2',
+    imports: [RouterLink],
+    templateUrl: './sg-test-page-sub-2.component.html',
+    styleUrls: ['./sg-test-page-sub-2.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgTestPageSub2Component {
   protected readonly qp = sgTestPageCreateQueryParams

apps/styleguide/src/routes/sg-textarea-autosize/sg-text-area-autosize.component.ts

@@ -5,12 +5,11 @@ import { Subject } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 
 @Component({
-  selector: 'sg-text-area-autosize',
-  standalone: true,
-  imports: [ReactiveFormsModule, TextareaAutosizeDirective],
-  templateUrl: './sg-text-area-autosize.component.html',
-  styleUrls: ['./sg-text-area-autosize.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-text-area-autosize',
+    imports: [ReactiveFormsModule, TextareaAutosizeDirective],
+    templateUrl: './sg-text-area-autosize.component.html',
+    styleUrls: ['./sg-text-area-autosize.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgTextAreaAutosizeComponent implements OnDestroy {
   readonly textCtrl = new FormControl<string>('hello\nWorld\ntype more to see what happens', { nonNullable: true })

apps/styleguide/src/routes/sg-tooltip/sg-tooltip.component.html

@@ -3,21 +3,23 @@ <h2>Tooltip</h2>
 
 <div class="sg-tooltip__meta">
   <select [formControl]="positionCtrl">
-    <option *ngFor="let tooltipPosition of tooltipPositions" [value]="tooltipPosition">{{tooltipPosition}}</option>
+    @for (tooltipPosition of tooltipPositions; track tooltipPosition) {
+      <option [value]="tooltipPosition">{{tooltipPosition}}</option>
+    }
   </select>
 
   <button (click)="tooltipDirective.show()">show</button>
   <button (click)="tooltipDirective.hide()">hide</button>
 </div>
 
 <span class="sg-tooltip__trigger"
-      #tooltipDirective="scTooltip"
-      [scTooltip]="tooltip"
-      [scTooltipShowDelay]="0"
-      [scTooltipPosition]="positionCtrl.value">My element which has a tooltip</span>
+  #tooltipDirective="scTooltip"
+  [scTooltip]="tooltip"
+  [scTooltipShowDelay]="0"
+[scTooltipPosition]="positionCtrl.value">My element which has a tooltip</span>
 
 <div class="sg-tooltip__trigger"
-     [scTooltip]="'a differently styled tooltip'"
-     [scTooltipPosition]="positionCtrl.value"
-     scTooltipClass="sg-tooltip-custom-style"
+  [scTooltip]="'a differently styled tooltip'"
+  [scTooltipPosition]="positionCtrl.value"
+  scTooltipClass="sg-tooltip-custom-style"
 >a differently styled tooltip</div>

apps/styleguide/src/routes/sg-tooltip/sg-tooltip.component.ts

@@ -1,16 +1,15 @@
-import { CommonModule } from '@angular/common'
+
 import { ChangeDetectionStrategy, Component, inject, Inject, Optional } from '@angular/core'
 import { FormControl, ReactiveFormsModule } from '@angular/forms'
 import { TOOLTIP_DEFAULT_OPTIONS, TooltipDirective, TooltipOptions, TooltipPosition } from '@shiftcode/ngx-components'
 import { LoggerService } from '@shiftcode/ngx-core'
 
 @Component({
-  selector: 'sg-tooltip',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, TooltipDirective],
-  templateUrl: './sg-tooltip.component.html',
-  styleUrls: ['./sg-tooltip.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'sg-tooltip',
+  imports: [ReactiveFormsModule, TooltipDirective, TooltipDirective, TooltipDirective, TooltipDirective],
+    templateUrl: './sg-tooltip.component.html',
+    styleUrls: ['./sg-tooltip.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SgTooltipComponent {
   readonly tooltip = '<b>Gefällt mir</b><br>Michael Wittwer<br>Michael Lieberherr'