feat!: update to Angular 18 (#121)

BREAKING CHANGE: Added support for Angular 18. Removed support for Angular 17.

.gitignore

@@ -45,3 +45,4 @@ Thumbs.db
 
 .angular
 /.nx/cache
+/test-results

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npm run commitlint ${1}

.husky/pre-commit

@@ -1,21 +1,5 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-set -exo pipefail
-
-UNSTAGED=$(git diff --name-only)
-
-if [ -n "$UNSTAGED" ]; then
-  git stash push --keep-index
-fi
-git diff --cached --name-only --diff-filter=d -z | xargs -0 npx prettier -wu
-git add .
-
 npm run lint:all
 npm run test:all
 npm run build
 npm run e2e
 
-if [ -n "$UNSTAGED" ]; then
-  git stash pop
-fi

angular.json

@@ -60,12 +60,14 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/apps/e2e",
+            "outputPath": {
+              "base": "dist/apps/e2e"
+            },
+            "browser": "apps/e2e/src/main.ts",
             "index": "apps/e2e/src/index.html",
-            "main": "apps/e2e/src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": ["zone.js", "@angular/localize/init"],
             "tsConfig": "apps/e2e/tsconfig.app.json",
             "assets": ["apps/e2e/src/favicon.ico", "apps/e2e/src/assets"],
             "styles": [
@@ -91,9 +93,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -102,7 +102,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "e2e:build:production"
@@ -114,7 +114,7 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "e2e:build"
           }

apps/e2e/playwright.config.ts

@@ -1,13 +1,14 @@
-import { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
+const config = defineConfig({
+  outputDir: '../../dist/playwright',
+  testDir: './tests',
   webServer: {
     command: 'npx ng s e2e --port 4204',
     port: 4204,
     timeout: 120 * 1000,
     cwd: '../..',
   },
-  testDir: './tests',
-};
+});
 
 export default config;

apps/e2e/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "types": []

apps/e2e/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "types": ["jasmine"]

karma.conf.js

@@ -20,9 +20,6 @@ module.exports = function (config, coverageDir, isCi) {
       require(__dirname + '/scripts/karma-webkit-launcher.js'),
       require('@angular-devkit/build-angular/plugins/karma'),
     ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
     jasmineHtmlReporter: {
       suppressAll: true, // removes the duplicated traces
     },
@@ -53,8 +50,13 @@ module.exports = function (config, coverageDir, isCi) {
     browsers: isCi ? ['ChromeHeadlessCI', 'WebkitHeadless'] : ['Chrome'],
     customLaunchers: {
       ChromeHeadlessCI: {
-        base: 'ChromeHeadless',
-        flags: ['--disable-translate', '--disable-extensions', '--no-sandbox'],
+        base: 'Chrome',
+        flags: [
+          '--disable-extensions',
+          '--disable-gpu',
+          '--disable-translate',
+          '--headless=new',
+        ],
       },
     },
     singleRun: isCi,

libs/ng-keyboard-sort/package.json

@@ -9,10 +9,10 @@
     "directory": "libs/ng-keyboard-sort"
   },
   "peerDependencies": {
-    "@angular/cdk": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "rxjs": "^7.0.0"
+    "@angular/cdk": "^18.2.0",
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "rxjs": "^7.8.0"
   },
   "keywords": [
     "angular",

libs/ng-keyboard-sort/src/lib/keyboard-sort-item.directive.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  booleanAttribute,
   ContentChildren,
   Directive,
   ElementRef,
@@ -40,7 +41,7 @@ export class KeyboardSortItemDirective
   @Input({ alias: 'kbdSortItem', required: true })
   public position = -1;
 
-  @Input()
+  @Input({ transform: booleanAttribute })
   public get activated(): boolean {
     return this.#activated;
   }
@@ -70,7 +71,7 @@ export class KeyboardSortItemDirective
   @HostBinding('attr.tabindex')
   public readonly tabindex = '-1' as const;
 
-  @Input()
+  @Input({ transform: booleanAttribute })
   public get kbdSortItemDisabled(): boolean {
     return this.#kbdSortItemDisabled;
   }

libs/ng-keyboard-sort/src/lib/keyboard-sort-list.directive.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  booleanAttribute,
   ChangeDetectorRef,
   ContentChildren,
   Directive,
@@ -39,7 +40,7 @@ export class KeyboardSortListDirective
   @Input()
   public kbdSortListOrientation: 'horizontal' | 'vertical' = 'horizontal';
 
-  @Input()
+  @Input({ transform: booleanAttribute })
   public kbdSortListDisabled = false;
 
   @Input({ required: true })

libs/ng-keyboard-sort/tsconfig.lib.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "declaration": true,

libs/ng-keyboard-sort/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "types": ["jasmine", "@angular/localize"]