feat: Upgrades to Angular 19

BREAKING CHANGE: Angular 19 required

.github/workflows/main.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.14.x
+          node-version: 22.12.x
       - name: Install dependencies
         run: yarn --frozen-lockfile --non-interactive --no-progress
       - name: Lint Demo
@@ -34,7 +34,7 @@ jobs:
       - name: Build Demo
         run: yarn run demo:build:prod --progress=false --base-href "https://cloudnc.github.io/ngx-sub-form/"
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           browser: chrome
           start: yarn start-e2e-file-server

.nvmrc

@@ -1 +1 @@
-v20.11.1
+v22.12.0

README.md

@@ -53,6 +53,7 @@ npm i ngx-sub-form
 | `16.x`               | `9.0.0`                                              |
 | `17.x`               | `10.0.0`                                             |
 | `18.x`               | `11.0.0`                                             |
+| `19.x`               | `12.0.0`                                             |
 
 # API
 

angular.json

@@ -15,22 +15,22 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/ngx-sub-form-demo",
+            "outputPath": {
+              "base": "dist/ngx-sub-form-demo"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "src/tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -45,8 +45,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

package.json

@@ -34,20 +34,20 @@
     "readme:check": "yarn readme:build && ! git status | grep README.md || (echo 'You must commit build and commit changes to README.md!' && exit 1)",
     "lint": "ng lint",
     "------------------------ CI ------------------------": "",
-    "start-e2e-file-server": "cp -r dist/ngx-sub-form-demo dist/ngx-sub-form-demo-e2e && sed -i 's/base href=\"https:\\/\\/cloudnc.github.io\\/ngx-sub-form\\/\"/base href=\"\\/\"/' dist/ngx-sub-form-demo-e2e/index.html && npx http-server --port 4765 ./dist/ngx-sub-form-demo-e2e"
+    "start-e2e-file-server": "cp -r dist/ngx-sub-form-demo dist/ngx-sub-form-demo-e2e && sed -i 's/base href=\"https:\\/\\/cloudnc.github.io\\/ngx-sub-form\\/\"/base href=\"\\/\"/' dist/ngx-sub-form-demo-e2e/browser/index.html && npx http-server --port 4765 ./dist/ngx-sub-form-demo-e2e/browser"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "18.0.1",
-    "@angular/cdk": "18.0.1",
-    "@angular/common": "18.0.1",
-    "@angular/compiler": "18.0.1",
-    "@angular/core": "18.0.1",
-    "@angular/forms": "18.0.1",
-    "@angular/material": "18.0.1",
-    "@angular/platform-browser": "18.0.1",
-    "@angular/platform-browser-dynamic": "18.0.1",
-    "@angular/router": "18.0.1",
+    "@angular/animations": "19.0.3",
+    "@angular/cdk": "19.0.3",
+    "@angular/common": "19.0.3",
+    "@angular/compiler": "19.0.3",
+    "@angular/core": "19.0.3",
+    "@angular/forms": "19.0.3",
+    "@angular/material": "19.0.3",
+    "@angular/platform-browser": "19.0.3",
+    "@angular/platform-browser-dynamic": "19.0.3",
+    "@angular/router": "19.0.3",
     "@types/uuid": "9.0.0",
     "commitizen": "4.2.6",
     "core-js": "3.23.1",
@@ -57,26 +57,26 @@
     "rxjs": "7.6.0",
     "tslib": "2.4.1",
     "uuid": "9.0.0",
-    "zone.js": "0.14.0"
+    "zone.js": "0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.0.2",
-    "@angular-eslint/builder": "18.0.0",
-    "@angular-eslint/eslint-plugin": "18.0.0",
-    "@angular-eslint/eslint-plugin-template": "18.0.0",
-    "@angular-eslint/schematics": "18.0.0",
-    "@angular-eslint/template-parser": "18.0.0",
-    "@angular/cli": "18.0.2",
-    "@angular/compiler-cli": "18.0.1",
-    "@angular/language-service": "18.0.1",
+    "@angular-devkit/build-angular": "19.0.4",
+    "@angular-eslint/builder": "19.0.2",
+    "@angular-eslint/eslint-plugin": "19.0.2",
+    "@angular-eslint/eslint-plugin-template": "19.0.2",
+    "@angular-eslint/schematics": "19.0.2",
+    "@angular-eslint/template-parser": "19.0.2",
+    "@angular/cli": "19.0.4",
+    "@angular/compiler-cli": "19.0.3",
+    "@angular/language-service": "19.0.3",
     "@types/jasmine": "4.3.1",
     "@types/jasminewd2": "2.0.10",
     "@types/lodash": "4.14.191",
     "@types/lodash-es": "4.17.6",
-    "@types/node": "18.11.11",
+    "@types/node": "22.10.2",
     "@typescript-eslint/eslint-plugin": "7.11.0",
     "@typescript-eslint/parser": "7.11.0",
-    "cypress": "12.0.2",
+    "cypress": "13.16.1",
     "cz-conventional-changelog": "3.3.0",
     "embedme": "1.22.1",
     "eslint": "9.3.0",
@@ -92,13 +92,13 @@
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
-    "ng-packagr": "18.0.0",
+    "ng-packagr": "19.0.1",
     "prettier": "2.7.1",
     "semantic-release": "19.0.5",
     "ts-node": "10.9.1",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "tsdef": "0.0.14",
-    "typescript": "5.4.5"
+    "typescript": "5.6.3"
   },
   "repository": {
     "type": "git",

prettier.config.js

@@ -13,4 +13,5 @@ module.exports = {
   insertPragma: false,
   proseWrap: 'preserve',
   htmlWhitespaceSensitivity: 'ignore',
+  endOfLine: 'lf',
 };

projects/ngx-sub-form/package.json

@@ -6,9 +6,9 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
     "fast-deep-equal": "^3.1.3",
     "lodash-es": "^4.17.21",
     "ngx-observable-lifecycle": "^2.2.1",

src/app/app.component.ts

@@ -4,5 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: false,
 })
 export class AppComponent {}

src/app/main/listing/listing-form/droid-listing/assassin-droid/assassin-droid.component.ts

@@ -16,6 +16,7 @@ export const ASSASSIN_DROID_WEAPON_TEXT: { [K in AssassinDroidWeapon]: string }
   styleUrls: ['./assassin-droid.component.scss'],
   providers: subformComponentProviders(AssassinDroidComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AssassinDroidComponent {
   public AssassinDroidWeapon = AssassinDroidWeapon;

src/app/main/listing/listing-form/droid-listing/astromech-droid/astromech-droid.component.ts

@@ -9,6 +9,7 @@ import { AstromechDroid, AstromechDroidShape, DroidType } from '../../../../../i
   styleUrls: ['./astromech-droid.component.scss'],
   providers: subformComponentProviders(AstromechDroidComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AstromechDroidComponent {
   public AstromechDroidShape = AstromechDroidShape;

src/app/main/listing/listing-form/droid-listing/droid-product.component.ts

@@ -25,6 +25,7 @@ interface OneDroidForm {
   styleUrls: ['./droid-product.component.scss'],
   providers: subformComponentProviders(DroidProductComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class DroidProductComponent {
   public DroidType = DroidType;

src/app/main/listing/listing-form/droid-listing/medical-droid/medical-droid.component.ts

@@ -9,6 +9,7 @@ import { DroidType, MedicalDroid } from 'src/app/interfaces/droid.interface';
   styleUrls: ['./medical-droid.component.scss'],
   providers: subformComponentProviders(MedicalDroidComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MedicalDroidComponent {
   public form = createForm<MedicalDroid>(this, {

src/app/main/listing/listing-form/droid-listing/protocol-droid/protocol-droid.component.ts

@@ -9,6 +9,7 @@ import { DroidType, Languages, ProtocolDroid } from '../../../../../interfaces/d
   styleUrls: ['./protocol-droid.component.scss'],
   providers: subformComponentProviders(ProtocolDroidComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ProtocolDroidComponent {
   public Languages = Languages;

src/app/main/listing/listing-form/listing-form.component.ts

@@ -22,6 +22,7 @@ interface OneListingForm {
   templateUrl: './listing-form.component.html',
   styleUrls: ['./listing-form.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ListingFormComponent {
   public ListingType: typeof ListingType = ListingType;

src/app/main/listing/listing-form/vehicle-listing/crew-members/crew-member/crew-member.component.ts

@@ -9,6 +9,7 @@ import { CrewMember } from '../../../../../../interfaces/crew-member.interface';
   styleUrls: ['./crew-member.component.scss'],
   providers: subformComponentProviders(CrewMemberComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class CrewMemberComponent {
   public form = createForm<CrewMember>(this, {

src/app/main/listing/listing-form/vehicle-listing/crew-members/crew-members.component.ts

@@ -13,6 +13,7 @@ interface CrewMembersForm {
   styleUrls: ['./crew-members.component.scss'],
   providers: subformComponentProviders(CrewMembersComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class CrewMembersComponent {
   public form = createForm<CrewMember[], CrewMembersForm>(this, {

src/app/main/listing/listing-form/vehicle-listing/spaceship/spaceship.component.ts

@@ -9,6 +9,7 @@ import { Spaceship, VehicleType } from 'src/app/interfaces/vehicle.interface';
   styleUrls: ['./spaceship.component.scss'],
   providers: subformComponentProviders(SpaceshipComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class SpaceshipComponent {
   public form = createForm<Spaceship>(this, {

src/app/main/listing/listing-form/vehicle-listing/speeder/speeder.component.ts

@@ -9,6 +9,7 @@ import { Speeder, VehicleType } from 'src/app/interfaces/vehicle.interface';
   styleUrls: ['./speeder.component.scss'],
   providers: subformComponentProviders(SpeederComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class SpeederComponent {
   public form = createForm<Speeder>(this, {

src/app/main/listing/listing-form/vehicle-listing/vehicle-product.component.ts

@@ -16,6 +16,7 @@ export interface OneVehicleForm {
   styleUrls: ['./vehicle-product.component.scss'],
   providers: subformComponentProviders(VehicleProductComponent),
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class VehicleProductComponent {
   public VehicleType = VehicleType;

src/app/main/listing/listing.component.ts

@@ -13,6 +13,7 @@ import { UuidService } from '../../services/uuid.service';
   templateUrl: './listing.component.html',
   styleUrls: ['./listing.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ListingComponent {
   public readonlyFormControl: UntypedFormControl = new UntypedFormControl(false);

src/app/main/listings/display-crew-members.pipe.ts

@@ -3,6 +3,7 @@ import { CrewMember } from 'src/app/interfaces/crew-member.interface';
 
 @Pipe({
   name: 'displayCrewMembers',
+  standalone: false,
 })
 export class DisplayCrewMembersPipe implements PipeTransform {
   transform(crewMembers: CrewMember[]): string {

src/app/main/listings/listings.component.ts

@@ -8,6 +8,7 @@ import { ListingType, OneListing } from '../../interfaces/listing.interface';
   templateUrl: './listings.component.html',
   styleUrls: ['./listings.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ListingsComponent {
   @Input() listings: OneListing[] = [];

src/app/main/main.component.ts

@@ -6,6 +6,7 @@ import { ListingService } from '../services/listing.service';
   templateUrl: './main.component.html',
   styleUrls: ['./main.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MainComponent {
   public listings$ = this.listingService.getListings();

tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
+    "esModuleInterop": true,
     "declaration": false,
     "module": "es2020",
     "moduleResolution": "node",
@@ -13,7 +14,6 @@
     "strictNullChecks": true,
     "strictFunctionTypes": true,
     "strictPropertyInitialization": true,
-    "allowSyntheticDefaultImports": true,
     "stripInternal": true,
     "target": "ES2022",
     "typeRoots": ["node_modules/@types"],