Upgrade to Angular 21

.gitignore

@@ -1,5 +1,8 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+/package-lock.json
+/.angular
+
 # compiled output
 /dist
 /tmp

angular.json

@@ -18,12 +18,14 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/testowy",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -59,12 +61,9 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
+              "sourceMap": true
-              "namedChunks": true
             }
           },
           "defaultConfiguration": "production"
@@ -73,10 +72,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "testowy:build:production"
+              "buildTarget": "testowy:build:production"
             },
             "development": {
-              "browserTarget": "testowy:build:development"
+              "buildTarget": "testowy:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -84,14 +83,16 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "testowy:build"
+            "buildTarget": "testowy:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
+            "polyfills": [
-            "polyfills": "src/polyfills.ts",
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
@@ -108,6 +109,5 @@
         }
       }
     }
-  },
+  }
-  "defaultProject": "testowy"
 }

package.json

@@ -11,36 +11,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.0",
+    "@angular/animations": "^21.0.0",
-    "@angular/cdk": "^12.2.6",
+    "@angular/cdk": "^21.0.0",
-    "@angular/common": "~12.2.0",
+    "@angular/common": "^21.0.0",
-    "@angular/compiler": "~12.2.0",
+    "@angular/compiler": "^21.0.0",
-    "@angular/core": "~12.2.0",
+    "@angular/core": "^21.0.0",
-    "@angular/forms": "~12.2.0",
+    "@angular/forms": "^21.0.0",
-    "@angular/material": "^12.2.6",
+    "@angular/material": "^21.0.0",
-    "@angular/localize": "^12.2.6",
+    "@angular/localize": "^21.0.0",
-    "@angular/platform-browser": "~12.2.0",
+    "@angular/platform-browser": "^21.0.0",
-    "@angular/platform-browser-dynamic": "~12.2.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
-    "@angular/router": "~12.2.0",
+    "@angular/router": "^21.0.0",
-    "date-fns": "~2.24.0",
+    "date-fns": "^4.1.0",
-    "rxjs": "~6.6.0",
+    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
+    "tslib": "^2.8.1",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.6",
+    "@angular-devkit/build-angular": "^21.0.0",
-    "@angular/cli": "~12.2.6",
+    "@angular/cli": "^21.0.0",
-    "@angular/compiler-cli": "~12.2.0",
+    "@angular/compiler-cli": "^21.0.0",
-    "@angular/localize": "^12.2.6",
+    "@types/jasmine": "~5.1.0",
-    "@types/jasmine": "~3.8.0",
+    "@types/node": "^22.10.0",
-    "@types/node": "^12.11.1",
+    "date-fns": "^4.1.0",
-    "date-fns": "~2.24.0",
+    "jasmine-core": "~5.5.0",
-    "jasmine-core": "~3.8.0",
+    "karma": "~6.4.0",
-    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.2.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
-    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~5.1.0",
-    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~5.9.3"
-    "typescript": "~4.3.5"
   }
 }

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

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  standalone: false
 })
 export class AppComponent implements OnInit {
 

src/app/components/iban/iban.component.ts

@@ -6,7 +6,8 @@ import { IbanService } from '../../service/iban.service';
 @Component({
   selector: 'app-iban',
   templateUrl: './iban.component.html',
-  styleUrls: ['./iban.component.scss']
+  styleUrls: ['./iban.component.scss'],
+  standalone: false
 })
 export class IbanComponent implements OnInit {
   public valueField: FormControl;
@@ -68,7 +69,7 @@ export class IbanComponent implements OnInit {
 
     if (this.valueField.valid) {
       var formattedValue: string;
-      
+
       if (this.separators) {
         formattedValue = this.addSeparators(this.valueField.value);
       } else {

src/app/components/nip/nip.component.ts

@@ -6,7 +6,8 @@ import { ClipboardService } from 'src/app/service/gui/clipboard.service';
 @Component({
   selector: 'app-nip',
   templateUrl: './nip.component.html',
-  styleUrls: ['./nip.component.scss']
+  styleUrls: ['./nip.component.scss'],
+  standalone: false
 })
 export class NipComponent implements OnInit {
   public valueField: FormControl;

src/app/components/pesel/pesel.component.ts

@@ -6,7 +6,8 @@ import { ClipboardService } from 'src/app/service/gui/clipboard.service';
 @Component({
   selector: 'app-pesel',
   templateUrl: './pesel.component.html',
-  styleUrls: ['./pesel.component.scss']
+  styleUrls: ['./pesel.component.scss'],
+  standalone: false
 })
 export class PeselComponent implements OnInit {
   public valueField: FormControl;

src/app/components/regon/regon.component.ts

@@ -6,11 +6,12 @@ import { ClipboardService } from 'src/app/service/gui/clipboard.service';
 @Component({
   selector: 'app-regon',
   templateUrl: './regon.component.html',
-  styleUrls: ['./regon.component.scss']
+  styleUrls: ['./regon.component.scss'],
+  standalone: false
 })
 export class RegonComponent implements OnInit {
   public valueField: FormControl;
-  
+
   constructor(private regonService: RegonService, private clipboardService: ClipboardService) {
     this.valueField = new FormControl('nip');
     this.valueField.setValidators([(control: AbstractControl) => this.regonService.validateRegon9(control.value)]);

src/app/translate-pipe.ts

@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'translate' })
+@Pipe({
+  name: 'translate',
+  standalone: false
+})
 export class TranslatePipe implements PipeTransform {
   private readonly translations: Map<string, string> = new Map([
     // wspólne
@@ -29,4 +32,4 @@ export class TranslatePipe implements PipeTransform {
 
     return translated;
   }
-}
+}

tsconfig.json

@@ -12,10 +12,11 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "ES2022",
-    "module": "es2020",
+    "useDefineForClassFields": false,
+    "module": "ESNext",
     "lib": [
       "es2020",
       "dom"