feat: upgrade angular to v19

package.json

@@ -16,16 +16,16 @@
   "prettier": "@pascaliske/prettier-config/tailwind",
   "packageManager": "yarn@1.22.22",
   "dependencies": {
-    "@angular/animations": "^18.2.12",
-    "@angular/common": "^18.2.12",
-    "@angular/compiler": "^18.2.12",
-    "@angular/core": "^18.2.12",
-    "@angular/forms": "^18.2.12",
-    "@angular/platform-browser": "^18.2.12",
-    "@angular/platform-browser-dynamic": "^18.2.12",
-    "@angular/platform-server": "^18.2.12",
-    "@angular/router": "^18.2.12",
-    "@angular/ssr": "^18.2.12",
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/platform-server": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@angular/ssr": "^19.0.0",
     "@fortawesome/angular-fontawesome": "0.15.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
@@ -42,9 +42,9 @@
     "@angular-eslint/eslint-plugin-template": "18.4.0",
     "@angular-eslint/schematics": "18.4.0",
     "@angular-eslint/template-parser": "18.4.0",
-    "@angular/build": "^18.2.12",
-    "@angular/cli": "~18.2.12",
-    "@angular/compiler-cli": "^18.2.12",
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "~19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
     "@cloudflare/kv-asset-handler": "^0.3.4",
     "@cloudflare/workers-types": "^4.20241112.0",
     "@commitlint/cli": "^19.5.0",

server.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from 'node:url'
 import { dirname, join, resolve } from 'node:path'
 import { APP_BASE_HREF } from '@angular/common'
-import { CommonEngine } from '@angular/ssr'
+import { CommonEngine } from '@angular/ssr/node'
 import express from 'express'
 import bootstrap from './src/main.server'
 

src/app/app.component.ts

@@ -9,7 +9,6 @@ import { FooterComponent } from 'components/footer/footer.component'
 import { TriangleComponent } from 'components/triangle/triangle.component'
 
 @Component({
-    standalone: true,
     selector: 'cmp-root',
     templateUrl: './app.component.html',
     imports: [

src/app/components/copy/copy.component.html

@@ -1,5 +1,5 @@
 <ng-container [ngSwitch]="type">
-    <p class="mb-5 font-light" *ngSwitchCase="'text'">{{ text }}</p>
-    <p class="mb-5 font-light" [innerHTML]="html" *ngSwitchCase="'html'"></p>
+    <p class="mb-5 font-light" *ngSwitchCase="'text'">{{ text() }}</p>
+    <p class="mb-5 font-light" [innerHTML]="html()" *ngSwitchCase="'html'"></p>
     <p class="mb-5 font-light" *ngSwitchCase="'content'"><ng-content></ng-content></p>
 </ng-container>

src/app/components/copy/copy.component.ts

@@ -1,25 +1,22 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { NgSwitch, NgSwitchCase } from '@angular/common'
 
 @Component({
-    standalone: true,
     selector: 'cmp-copy',
     templateUrl: './copy.component.html',
     imports: [NgSwitch, NgSwitchCase],
 })
 export class CopyComponent {
-    @Input()
-    public text?: string
+    public readonly text = input<string>()
 
-    @Input()
-    public html?: string
+    public readonly html = input<string>()
 
     public get type(): 'text' | 'html' | 'content' {
-        if ((this.text?.length ?? 0) > 0) {
+        if ((this.text()?.length ?? 0) > 0) {
             return 'text'
         }
 
-        if ((this.html?.length ?? 0) > 0) {
+        if ((this.html()?.length ?? 0) > 0) {
             return 'html'
         }
 

src/app/components/footer/footer.component.ts

@@ -5,7 +5,6 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { faHeart } from '@fortawesome/free-regular-svg-icons'
 
 @Component({
-    standalone: true,
     selector: 'cmp-footer',
     templateUrl: './footer.component.html',
     imports: [RouterLink, FaIconComponent],

src/app/components/greeting/greeting.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core'
 import { HeadlineComponent } from 'components/headline/headline.component'
 
 @Component({
-    standalone: true,
     selector: 'cmp-greeting',
     templateUrl: './greeting.component.html',
     imports: [HeadlineComponent],

src/app/components/headline/headline.component.html

@@ -1,25 +1,25 @@
-<ng-container [ngSwitch]="level">
+<ng-container [ngSwitch]="level()">
     <ng-template #content>
-        <span>{{ text }}</span>
-        <span class="text-bitterSweet motion-safe:animate-blink" *ngIf="level == 'h1'">_</span>
+        <span>{{ text() }}</span>
+        <span class="text-bitterSweet motion-safe:animate-blink" *ngIf="level() == 'h1'">_</span>
     </ng-template>
 
     <h1 class="mb-5 lg:mb-10" *ngSwitchCase="'h1'">
         <ng-container [ngTemplateOutlet]="content"></ng-container>
     </h1>
-    <h2 class="mb-5 lg:mb-8" [id]="id" *ngSwitchCase="'h2'">
+    <h2 class="mb-5 lg:mb-8" [id]="id()" *ngSwitchCase="'h2'">
         <ng-container [ngTemplateOutlet]="content"></ng-container>
     </h2>
-    <h3 class="mb-5 lg:mb-7" [id]="id" *ngSwitchCase="'h3'">
+    <h3 class="mb-5 lg:mb-7" [id]="id()" *ngSwitchCase="'h3'">
         <ng-container [ngTemplateOutlet]="content"></ng-container>
     </h3>
-    <h4 class="mb-4 lg:mb-6" [id]="id" *ngSwitchCase="'h4'">
+    <h4 class="mb-4 lg:mb-6" [id]="id()" *ngSwitchCase="'h4'">
         <ng-container [ngTemplateOutlet]="content"></ng-container>
     </h4>
-    <h5 class="mb-3 lg:mb-5" [id]="id" *ngSwitchCase="'h5'">
+    <h5 class="mb-3 lg:mb-5" [id]="id()" *ngSwitchCase="'h5'">
         <ng-container [ngTemplateOutlet]="content"></ng-container>
     </h5>
-    <h6 class="mt-2 lg:mt-4" [id]="id" *ngSwitchCase="'h6'">
+    <h6 class="mt-2 lg:mt-4" [id]="id()" *ngSwitchCase="'h6'">
         <ng-container [ngTemplateOutlet]="content"></ng-container>
     </h6>
 </ng-container>

src/app/components/headline/headline.component.ts

@@ -1,19 +1,15 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet } from '@angular/common'
 
 @Component({
-    standalone: true,
     selector: 'cmp-headline',
     templateUrl: './headline.component.html',
     imports: [NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet],
 })
 export class HeadlineComponent {
-    @Input()
-    public level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1'
+    public readonly level = input<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>('h1')
 
-    @Input()
-    public text!: string
+    public readonly text = input.required<string>()
 
-    @Input()
-    public id!: string
+    public readonly id = input<string>()
 }

src/app/components/input/input.component.html

@@ -1,35 +1,35 @@
-<ng-container [ngSwitch]="type">
-    <label class="group relative my-5 flex" for="{{ id }}">
+<ng-container [ngSwitch]="type()">
+    <label class="group relative my-5 flex" for="{{ id() }}">
         <span
             class="absolute top-1/2 -translate-y-1/2 group-focus-within:-top-4 group-focus-within:translate-y-0 group-focus-within:text-xs motion-safe:transition-all motion-safe:duration-200"
             [class.!-top-4]="filled"
             [class.!translate-y-0]="filled"
             [class.!text-xs]="filled"
-            *ngIf="label"
+            *ngIf="label()"
         >
-            {{ label }}
+            {{ label() }}
         </span>
 
         <textarea
             class="h-10 min-h-[2.5rem] w-full resize-none bg-[transparent] text-gunmetal caret-bitterSweet group-focus-within:min-h-[150px] motion-safe:transition-[min-height] motion-safe:duration-150 dark:text-ghostWhite"
             [class.!min-h-[150px]]="filled"
-            [formControl]="fc"
-            [id]="id"
+            [formControl]="fc()"
+            [id]="id()"
             *ngSwitchCase="'textarea'"
         ></textarea>
 
         <input
             class="h-10 w-full bg-[transparent] text-gunmetal caret-bitterSweet dark:text-ghostWhite"
-            [type]="type"
-            [formControl]="fc"
-            [id]="id"
-            [autocomplete]="autocomplete"
+            [type]="type()"
+            [formControl]="fc()"
+            [id]="id()"
+            [autocomplete]="autocomplete()"
             *ngSwitchDefault
         />
 
         <span
             class="absolute bottom-0 left-0 h-[5px] w-full before:absolute before:-bottom-[5px] before:left-0 before:h-[5px] before:w-full before:bg-paynesGray before:bg-opacity-50 after:absolute after:-bottom-[5px] after:left-0 after:h-[5px] after:w-0 after:bg-bitterSweet group-focus-within:after:w-full motion-safe:after:transition-[width] motion-safe:after:duration-150 sm:before:bottom-0 sm:before:h-[3px] sm:after:bottom-0 sm:after:h-[3px]"
-            *ngIf="label"
+            *ngIf="label()"
         ></span>
     </label>
 </ng-container>

src/app/components/input/input.component.ts

@@ -1,30 +1,24 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { ReactiveFormsModule, FormControl } from '@angular/forms'
 
 @Component({
-    standalone: true,
     selector: 'cmp-input',
     templateUrl: './input.component.html',
     imports: [CommonModule, ReactiveFormsModule],
 })
 export class InputComponent {
-    @Input()
-    public type: 'text' | 'email' | 'textarea' = 'text'
+    public readonly type = input<'text' | 'email' | 'textarea'>('text')
 
-    @Input()
-    public fc: FormControl = new FormControl()
+    public readonly fc = input<FormControl>(new FormControl())
 
-    @Input()
-    public id!: string
+    public readonly id = input.required<string>()
 
-    @Input()
-    public label?: string
+    public readonly label = input<string>()
 
-    @Input()
-    public autocomplete?: string
+    public readonly autocomplete = input<string>()
 
     public get filled(): boolean {
-        return (this.fc?.dirty ?? false) && this.fc?.value?.length > 0
+        return (this.fc()?.dirty ?? false) && this.fc()?.value?.length > 0
     }
 }

src/app/components/navigation-button/navigation-button.component.html

@@ -1,8 +1,8 @@
 <div
     class="nav-button"
-    [class.!bg-[transparent]]="open"
-    [class.before:!top-0]="open"
-    [class.after:!top-0]="open"
-    [class.before:!-rotate-45]="open"
-    [class.after:!rotate-45]="open"
+    [class.!bg-[transparent]]="open()"
+    [class.before:!top-0]="open()"
+    [class.after:!top-0]="open()"
+    [class.before:!-rotate-45]="open()"
+    [class.after:!rotate-45]="open()"
 ></div>

src/app/components/navigation-button/navigation-button.component.ts

@@ -1,11 +1,10 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 
 @Component({
     standalone: true,
     selector: 'cmp-navigation-button',
     templateUrl: './navigation-button.component.html',
 })
 export class NavigationButtonComponent {
-    @Input()
-    public open: boolean = false
+    public readonly open = input<boolean>(false)
 }

src/app/components/navigation/navigation.component.ts

@@ -24,7 +24,6 @@ export interface NavigationLink {
 }
 
 @Component({
-    standalone: true,
     selector: 'cmp-navigation',
     templateUrl: './navigation.component.html',
     imports: [

src/app/components/section/section.component.html

@@ -1,4 +1,4 @@
-<section class="flex leading-loose" [class.mt-10]="!first" [class.max-w-4xl]="!full">
+<section class="flex leading-loose" [class.mt-10]="!first()" [class.max-w-4xl]="!full()">
     <div class="flex-1">
         <ng-content></ng-content>
     </div>

src/app/components/section/section.component.ts

@@ -1,14 +1,12 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 
 @Component({
     standalone: true,
     selector: 'cmp-section',
     templateUrl: './section.component.html',
 })
 export class SectionComponent {
-    @Input()
-    public first: boolean = false
+    public readonly first = input<boolean>(false)
 
-    @Input()
-    public full: boolean = false
+    public readonly full = input<boolean>(false)
 }

src/app/components/socials/socials.component.html

@@ -1,6 +1,6 @@
 <ul
     class="mt-10 grid grid-cols-[repeat(7,40px)] content-center gap-4 text-4xl text-bitterSweet min-[450px]:grid-cols-[repeat(7,50px)] min-[450px]:gap-10 sm:text-5xl"
-    [class.!mt-20]="type == 'box'"
+    [class.!mt-20]="type() == 'box'"
 >
     <li
         class="transition-transform duration-300 motion-safe:hover:scale-110 sm:mt-0"

src/app/components/socials/socials.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { NgFor } from '@angular/common'
 import { FaIconComponent } from '@fortawesome/angular-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
@@ -19,14 +19,12 @@ export interface SocialChannel {
 }
 
 @Component({
-    standalone: true,
     selector: 'cmp-socials',
     templateUrl: './socials.component.html',
     imports: [NgFor, FaIconComponent],
 })
 export class SocialsComponent {
-    @Input()
-    public type: 'box' | 'minimal' = 'box'
+    public readonly type = input<'box' | 'minimal'>('box')
 
     public channels: SocialChannel[] = [
         {

src/app/components/theme-button/theme-button.component.html

@@ -4,7 +4,7 @@
     width="35"
     height="35"
     viewBox="0 96 960 960"
-    [ngSwitch]="state"
+    [ngSwitch]="state()"
 >
     <path
         class="fill-gunmetal transition-colors dark:fill-ghostWhite"

src/app/components/theme-button/theme-button.component.ts

@@ -1,14 +1,12 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { NgSwitch, NgSwitchCase } from '@angular/common'
 import { ThemeIcon } from 'shared/theme/theme.service'
 
 @Component({
-    standalone: true,
     selector: 'cmp-theme-button',
     templateUrl: './theme-button.component.html',
     imports: [NgSwitch, NgSwitchCase],
 })
 export class ThemeButtonComponent {
-    @Input()
-    public state: ThemeIcon | null = ThemeIcon.SYSTEM
+    public readonly state = input<ThemeIcon | null>(ThemeIcon.SYSTEM)
 }

src/app/pages/contact/contact.component.ts

@@ -28,7 +28,6 @@ export interface ContactFormGroup {
 }
 
 @Component({
-    standalone: true,
     selector: 'cmp-contact',
     templateUrl: './contact.component.html',
     imports: [

src/app/pages/home/home.component.ts

@@ -4,7 +4,6 @@ import { GreetingComponent } from 'components/greeting/greeting.component'
 import { SocialsComponent } from 'components/socials/socials.component'
 
 @Component({
-    standalone: true,
     selector: 'cmp-home',
     templateUrl: './home.component.html',
     imports: [GreetingComponent, SocialsComponent],

src/app/pages/legal-notice/legal-notice.component.ts

@@ -6,7 +6,6 @@ import { HeadlineComponent } from 'components/headline/headline.component'
 import { CopyComponent } from 'components/copy/copy.component'
 
 @Component({
-    standalone: true,
     selector: 'cmp-legal-notice',
     templateUrl: './legal-notice.component.html',
     imports: [RouterLink, SectionComponent, HeadlineComponent, CopyComponent],