build(deps): update to Angular v19 (#845)

.github/workflows/reusable-test.yml

@@ -33,11 +33,13 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
       - name: Setup
         uses: ./.github/actions/setup
-      - name: Generate simple icons and font subset files
+      - name: Generate data
         run: |
           pnpm run --filter scripts build
           pnpm run --filter scripts generate:font-subsets
           pnpm run --filter scripts generate:simple-icons
+          pnpm run --filter scripts generate:templated-files
+          touch data/generated/release.json
       - name: Run tests
         run: cd .ci && make unit-test
       - name: Upload coverage results
@@ -80,10 +82,13 @@ jobs:
         #    In that scenario, `cypress run` does not install it again and errors
       - name: Cypress install
         run: pnpm cypress install
-      - name: Generate font subsets
+      - name: Generate data
         run: |
           pnpm run --filter scripts build
           pnpm run --filter scripts generate:font-subsets
+          pnpm run --filter scripts generate:simple-icons
+          pnpm run --filter scripts generate:templated-files
+          touch data/generated/release.json
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:

package.json

@@ -7,6 +7,7 @@
   },
   "scripts": {
     "build": "ng build",
+    "postbuild": "cp dist/@davidlj95/website/browser/index.csr.html dist/@davidlj95/website/browser/index.html",
     "build:pack": "DIST_DIR=dist/@davidlj95/website/browser; [ -d \"$DIST_DIR\" ] && cd $DIST_DIR && zip -r ../../../build.zip . || true",
     "build:pull-request": "pnpm run build --configuration pullRequest,production",
     "bundle:analyze": "pnpm run bundle:analyze:files '*.js'",
@@ -55,16 +56,16 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "18.2.2",
-    "@angular/common": "18.2.2",
-    "@angular/compiler": "18.2.2",
-    "@angular/core": "18.2.2",
-    "@angular/forms": "18.2.2",
-    "@angular/platform-browser": "18.2.2",
-    "@angular/platform-browser-dynamic": "18.2.2",
-    "@angular/platform-server": "18.2.2",
-    "@angular/router": "18.2.2",
-    "@angular/ssr": "18.2.2",
+    "@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.1",
     "@davidlj95/ngx-meta": "1.0.0-beta.15",
     "@fontsource/roboto": "5.1.0",
     "@fontsource/roboto-mono": "5.1.0",
@@ -76,12 +77,12 @@
     "rxjs": "7.8.1",
     "simple-icons": "13.16.0",
     "tslib": "2.8.1",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.2.2",
-    "@angular/cli": "18.2.2",
-    "@angular/compiler-cli": "18.2.2",
+    "@angular-devkit/build-angular": "19.0.1",
+    "@angular/cli": "19.0.1",
+    "@angular/compiler-cli": "19.0.0",
     "@commitlint/cli": "19.5.0",
     "@commitlint/config-conventional": "19.5.0",
     "@commitlint/types": "19.5.0",
@@ -93,10 +94,10 @@
     "@types/compression": "1.7.5",
     "@types/express": "4.17.21",
     "@types/jasmine": "5.1.4",
-    "@types/node": "20.16.5",
+    "@types/node": "20.17.8",
     "@types/signale": "1.4.7",
     "@types/subset-font": "2.2.0",
-    "angular-eslint": "18.3.0",
+    "angular-eslint": "18.4.2",
     "babel-loader": "9.2.1",
     "babel-plugin-istanbul": "7.0.0",
     "browser-sync": "3.0.3",
@@ -125,7 +126,7 @@
     "prettier": "3.3.3",
     "release-it": "17.10.0",
     "subset-font": "2.3.0",
-    "typescript": "5.4.5",
+    "typescript": "5.6.3",
     "typescript-eslint": "8.14.0"
   },
   "packageManager": "[email protected]",

renovate.json5

@@ -5,7 +5,7 @@
     'config:recommended',
     'config:best-practices',
     'config:js-app',
-    'github>davidlj95/renovate-config:angular/v18-lts',
+    'github>davidlj95/renovate-config:angular/v19-lts',
   ],
   prHourlyLimit: 0,
   prConcurrentLimit: 5,
@@ -54,11 +54,11 @@
       matchDepTypes: ['devDependencies'],
       automerge: true,
     },
-    // Angular v18
+    // Angular major version
     {
       // 👇 Includes devkit & eslint
-      matchDepNames: ['@angular{/,}**'],
-      allowedVersions: '^18',
+      matchDepNames: ['@angular{/,}**', 'angular-eslint'],
+      allowedVersions: '^19',
     },
     // ng-icons Angular compatibility
     // https://github.com/ng-icons/ng-icons/tree/master?tab=readme-ov-file#supported-versions

scripts/src/generate-release-info.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error No default export
 import release, { Config } from 'release-it'
 import { createReleaseItConfig, ExtraConfig } from '@/data/release-it'
 import { execSync } from 'child_process'

scripts/src/generate-simple-icons.ts

@@ -1,4 +1,4 @@
-import JSON_RESUME from '@/data/resume.json' assert { type: 'json' }
+import JSON_RESUME from '@/data/resume.json' with { type: 'json' }
 import * as icons from 'simple-icons'
 import { SimpleIcon } from 'simple-icons'
 import { mkdir, writeFile } from 'fs/promises'
@@ -18,7 +18,9 @@ async function generateSimpleIcons() {
   )
 }
 
-async function findNeededIcons(projects: typeof JSON_RESUME.projects) {
+async function findNeededIcons(
+  projects: typeof JSON_RESUME.projects,
+): Promise<readonly SimpleIcon[]> {
   if (projects.length > 0) {
     Log.info('Found %d projects', projects.length)
   } else {
@@ -39,7 +41,7 @@ async function findNeededIcons(projects: typeof JSON_RESUME.projects) {
   ]
   Log.item('Where %d are unique technology slugs', technologySlugs.length)
 
-  const allIcons = Object.values(icons)
+  const allIcons = Object.values(icons) as readonly SimpleIcon[]
   Log.info('Loaded %d simple icons', allIcons.length)
 
   const neededIcons = allIcons.filter((icon) =>

server.ts

@@ -1,5 +1,5 @@
 import { APP_BASE_HREF } from '@angular/common'
-import { CommonEngine } from '@angular/ssr'
+import { CommonEngine } from '@angular/ssr/node'
 import express from 'express'
 import { fileURLToPath } from 'node:url'
 import { dirname, join, resolve } from 'node:path'

src/app/app.component.spec.ts

@@ -1,26 +1,26 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { ComponentFixture } from '@angular/core/testing'
 import { MockComponents } from 'ng-mocks'
 import { shouldContainComponents } from '@/test/helpers/component-testers'
 import { ResumePageComponent } from './resume-page/resume-page.component'
 import { AppComponent } from './app.component'
 import { HeaderComponent } from './header/header.component'
 import { NoScriptComponent } from './no-script/no-script.component'
 import { By } from '@angular/platform-browser'
+import { componentTestSetup } from '@/test/helpers/component-test-setup'
+import { RouterOutlet } from '@angular/router'
 
 describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>
   let component: AppComponent
 
   beforeEach(async () => {
-    TestBed.configureTestingModule({
+    ;[fixture, component] = componentTestSetup(AppComponent, {
       imports: [
         AppComponent,
         MockComponents(NoScriptComponent, HeaderComponent, ResumePageComponent),
+        RouterOutlet,
       ],
     })
-
-    fixture = TestBed.createComponent(AppComponent)
-    component = fixture.componentInstance
     fixture.detectChanges()
   })
 

src/app/app.component.ts

@@ -8,7 +8,6 @@ import { maybeLoadConsoleEasterEgg } from './maybe-load-console-easter-egg'
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  standalone: true,
   imports: [HeaderComponent, NoScriptComponent, RouterOutlet],
 })
 export class AppComponent {

src/app/calendar-page/calendar-page.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-calendar-page',
-  standalone: true,
   imports: [],
   templateUrl: './calendar-page.component.html',
   styleUrl: './calendar-page.component.scss',

src/app/common/material-symbol.directive.spec.ts

@@ -24,7 +24,6 @@ describe('MaterialSymbolDirective', () => {
 function makeComponentWithDirective(elementTag: string): Type<unknown> {
   @Component({
     template: `<${elementTag} appMaterialSymbol></${elementTag}>`,
-    standalone: true,
     imports: [MaterialSymbolDirective],
   })
   class MaterialSymbolComponent {}

src/app/common/simple-icon/simple-icon.component.ts

@@ -10,7 +10,6 @@ import { SimpleIcon } from '@/common/simple-icon/simple-icon'
 
 @Component({
   selector: 'app-simple-icon',
-  standalone: true,
   imports: [AsyncPipe],
   templateUrl: './simple-icon.component.html',
   host: {

src/app/common/test-id.directive.spec.ts

@@ -31,7 +31,6 @@ function makeComponentWithChildElementHavingTestIdDirectiveSetTo({
 }): Type<unknown> {
   @Component({
     template: `<${elementTag} [appTestId]="testId"></${elementTag}>`,
-    standalone: true,
     imports: [TestIdDirective],
   })
   class TestIdComponent {

src/app/content-page/content-page.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-content-page',
-  standalone: true,
   imports: [],
   template: '<ng-content></ng-content>',
   styleUrl: './content-page.component.scss',

src/app/gifts-page/gifts-page.component.ts

@@ -4,7 +4,6 @@ import { ContentPageComponent } from '../content-page/content-page.component'
 
 @Component({
   selector: 'app-gifts-page',
-  standalone: true,
   imports: [NgOptimizedImage, ContentPageComponent],
   templateUrl: './gifts-page.component.html',
 })

src/app/header/header.component.spec.ts

@@ -5,6 +5,7 @@ import { MockComponents } from 'ng-mocks'
 import { ToolbarComponent } from './toolbar/toolbar.component'
 import { NavigationTabsComponent } from './navigation-tabs/navigation-tabs.component'
 import { LightDarkToggleComponent } from './light-dark-toggle/light-dark-toggle.component'
+import { ToolbarDividerComponent } from './toolbar-divider/toolbar-divider.component'
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent
@@ -28,6 +29,7 @@ const makeSut = () =>
         NavigationTabsComponent,
         ToolbarComponent,
         LightDarkToggleComponent,
+        ToolbarDividerComponent,
       ),
     ],
   })

src/app/header/header.component.ts

@@ -9,7 +9,6 @@ import { ToolbarDividerComponent } from './toolbar-divider/toolbar-divider.compo
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
-  standalone: true,
   imports: [
     NavigationTabsComponent,
     ToolbarComponent,

src/app/header/light-dark-toggle/light-dark-toggle.component.ts

@@ -5,7 +5,6 @@ import { ToolbarButtonComponent } from '../toolbar-button/toolbar-button.compone
 
 @Component({
   selector: 'app-light-dark-toggle',
-  standalone: true,
   imports: [ToolbarButtonComponent],
   templateUrl: './light-dark-toggle.component.html',
   styleUrl: './light-dark-toggle.component.scss',

src/app/header/navigation-tabs/navigation-tabs.component.ts

@@ -6,7 +6,6 @@ import { ToolbarButtonComponent } from '../toolbar-button/toolbar-button.compone
 
 @Component({
   selector: 'app-navigation-tabs',
-  standalone: true,
   imports: [
     TabsComponent,
     TabComponent,

src/app/header/tabs/tabs.component.spec.cy.ts

@@ -2,6 +2,7 @@ import { TabsComponent } from './tabs.component'
 import { TabComponent } from '../tab/tab.component'
 import { MountResponse } from 'cypress/angular'
 import { By } from '@angular/platform-browser'
+import { Component } from '@angular/core'
 
 describe('TabsComponent', () => {
   it('should mount', () => {
@@ -14,9 +15,14 @@ describe('TabsComponent', () => {
   describe('when all tabs fit the screen', () => {
     beforeEach(() => {
       cy.viewport('macbook-16')
-      cy.mount('<app-tabs><app-tab>Hello World</app-tab></app-tabs>', {
+      //👇 Explicit component declaration for Cypress to support v19
+      @Component({
+        template: '<app-tabs><app-tab>Hello World</app-tab></app-tabs>',
         imports: [TabsComponent, TabComponent],
       })
+      class HostComponent {}
+
+      cy.mount(HostComponent)
     })
 
     it('should disable previous paginator', () => {
@@ -32,20 +38,20 @@ describe('TabsComponent', () => {
     const TABS = [...Array(11).keys()]
     beforeEach(() => {
       cy.viewport('iphone-x')
-      cy.mount(
-        `
-        <app-tabs [style.max-width.%]="100">
-        @for(tab of ${JSON.stringify(TABS)}; track $index) {
+      //👇 Explicit component declaration for Cypress to support v19
+      @Component({
+        template: ` <app-tabs [style.max-width.%]="100">
+          @for (tab of ${JSON.stringify(TABS)}; track $index) {
             <app-tab>
-                <span style="white-space: nowrap">Tab {{ tab }}</span>
+              <span style="white-space: nowrap">Tab {{ tab }}</span>
             </app-tab>
-        }
+          }
         </app-tabs>`,
-        {
-          imports: [TabsComponent, TabComponent],
-        },
-      ).then((wrapper) => {
-        // noinspection CYUnusedAlias (used below)
+        imports: [TabsComponent, TabComponent],
+      })
+      class HostComponent {}
+
+      cy.mount(HostComponent).then((wrapper) => {
         cy.wrap(wrapper).as('angular')
       })
     })
@@ -150,7 +156,6 @@ describe('TabsComponent', () => {
 
     describe('when marking a tab as active', () => {
       beforeEach(() => {
-        // noinspection CYUnresolvedAlias
         cy.get<MountResponse<unknown>>('@angular').then((angular) => {
           const tabsElement = angular.fixture.debugElement.query(
             By.css('app-tabs'),

src/app/header/tabs/tabs.component.spec.ts

@@ -96,7 +96,6 @@ const makeHostComponent = (
         }
       </app-tabs>
     `,
-    standalone: true,
     imports: [TabsComponent, TabComponent],
   })
   class HostComponent {