Merge pull request #3552 from tarlepp/chore(deps)/dependency-update

Chore(deps) - Angular update

Author: tarlepp

angular.json

@@ -171,6 +171,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

package.json

@@ -35,75 +35,75 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "19.2.9",
-    "@angular/cdk": "19.2.14",
-    "@angular/common": "19.2.9",
-    "@angular/compiler": "19.2.9",
-    "@angular/core": "19.2.9",
-    "@angular/forms": "19.2.9",
-    "@angular/localize": "19.2.9",
-    "@angular/material": "19.2.14",
-    "@angular/platform-browser": "19.2.9",
-    "@angular/platform-browser-dynamic": "19.2.9",
-    "@angular/router": "19.2.9",
+    "@angular/animations": "20.0.3",
+    "@angular/cdk": "20.0.3",
+    "@angular/common": "20.0.3",
+    "@angular/compiler": "20.0.3",
+    "@angular/core": "20.0.3",
+    "@angular/forms": "20.0.3",
+    "@angular/localize": "20.0.3",
+    "@angular/material": "20.0.3",
+    "@angular/platform-browser": "20.0.3",
+    "@angular/platform-browser-dynamic": "20.0.3",
+    "@angular/router": "20.0.3",
     "@auth0/angular-jwt": "5.2.0",
     "@jsverse/transloco": "7.6.1",
     "@jsverse/transloco-keys-manager": "6.1.0",
     "@jsverse/transloco-utils": "7.0.2",
     "@ngbracket/ngx-layout": "19.0.0",
-    "@ngrx/effects": "19.1.0",
-    "@ngrx/entity": "19.1.0",
-    "@ngrx/operators": "^19.1.0",
-    "@ngrx/router-store": "19.1.0",
-    "@ngrx/store": "19.1.0",
-    "@ngrx/store-devtools": "19.1.0",
-    "@snyk/protect": "1.1296.2",
+    "@ngrx/effects": "19.2.1",
+    "@ngrx/entity": "19.2.1",
+    "@ngrx/operators": "19.2.1",
+    "@ngrx/router-store": "19.2.1",
+    "@ngrx/store": "19.2.1",
+    "@ngrx/store-devtools": "19.2.1",
+    "@snyk/protect": "1.1297.1",
     "luxon": "3.6.1",
     "luxon-angular": "6.0.0",
     "ngrx-store-localstorage": "19.0.1",
     "ngx-material-luxon": "1.1.1",
     "ngx-webstorage": "19.0.1",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
-    "zone.js": "0.15.0"
+    "zone.js": "0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.2.10",
-    "@angular-eslint/builder": "19.3.0",
-    "@angular-eslint/eslint-plugin": "19.3.0",
-    "@angular-eslint/eslint-plugin-template": "19.3.0",
-    "@angular-eslint/schematics": "19.3.0",
-    "@angular-eslint/template-parser": "19.3.0",
-    "@angular/cli": "19.2.10",
-    "@angular/compiler-cli": "19.2.9",
-    "@angular/language-service": "19.2.9",
+    "@angular-devkit/build-angular": "20.0.2",
+    "@angular-eslint/builder": "20.0.0",
+    "@angular-eslint/eslint-plugin": "20.0.0",
+    "@angular-eslint/eslint-plugin-template": "20.0.0",
+    "@angular-eslint/schematics": "20.0.0",
+    "@angular-eslint/template-parser": "20.0.0",
+    "@angular/cli": "20.0.2",
+    "@angular/compiler-cli": "20.0.3",
+    "@angular/language-service": "20.0.3",
     "@bartholomej/ngx-translate-extract": "8.0.2",
-    "@types/jasmine": "5.1.7",
+    "@types/jasmine": "5.1.8",
     "@types/jasminewd2": "2.0.13",
     "@types/luxon": "3.6.2",
-    "@types/node": "22.15.3",
-    "@typescript-eslint/eslint-plugin": "8.31.1",
+    "@types/node": "24.0.1",
+    "@typescript-eslint/eslint-plugin": "8.34.0",
     "@typescript-eslint/parser": "7.16.0",
     "eslint": "8.57.0",
     "eslint-plugin-deprecation": "2.0.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsdoc": "48.11.0",
     "eslint-plugin-ngrx": "2.1.4",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "jasmine-core": "5.7.1",
+    "jasmine-core": "5.8.0",
     "jasmine-spec-reporter": "7.0.0",
     "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
-    "ngx-build-plus": "19.0.0",
-    "postcss": "8.5.3",
+    "ngx-build-plus": "20.0.0",
+    "postcss": "8.5.5",
     "protractor": "7.0.0",
-    "stylelint": "16.19.1",
+    "stylelint": "16.20.0",
     "stylelint-config-sass-guidelines": "12.1.0",
-    "stylelint-config-standard-scss": "14.0.0",
-    "stylelint-scss": "6.11.1",
+    "stylelint-config-standard-scss": "15.0.1",
+    "stylelint-scss": "6.12.1",
     "ts-node": "10.9.2",
     "typescript": "5.8.3"
   },

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { marker } from '@jsverse/transloco-keys-manager/marker';
 import { MediaChange, MediaObserver } from '@ngbracket/ngx-layout';
@@ -36,24 +36,14 @@ import { authenticationActions, authenticationSelectors, layoutActions, layoutSe
 })
 
 export class AppComponent implements OnInit, OnDestroy {
-  private loggedIn: boolean;
-  private tokenInterval: number;
-  private readonly subscription: Subscription;
-
-  /**
-   * Constructor of the class, where we DI all services that we need to use
-   * within this component and initialize needed properties.
-   */
-  public constructor(
-    private readonly localStorage: LocalStorageService,
-    private readonly mediaObserver: MediaObserver,
-    private readonly store: Store,
-    private readonly authenticationService: AuthenticationService,
-  ) {
-    this.loggedIn = false;
-    this.tokenInterval = 0;
-    this.subscription = new Subscription();
-  }
+  private loggedIn: boolean = false;
+  private tokenInterval: number = 0;
+
+  private readonly localStorage: LocalStorageService = inject(LocalStorageService);
+  private readonly mediaObserver: MediaObserver = inject(MediaObserver);
+  private readonly store: Store = inject(Store);
+  private readonly authenticationService: AuthenticationService = inject(AuthenticationService);
+  private readonly subscription: Subscription = new Subscription();
 
   /**
    * A callback method that is invoked immediately after the default change

src/app/auth/guards/anonymous.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
 
@@ -9,14 +9,17 @@ import { AuthenticationService } from 'src/app/auth/services';
   providedIn: 'root',
 })
 export class AnonymousGuard extends BaseAuth {
+  protected readonly router: Router = inject(Router);
+  protected readonly authenticationService: AuthenticationService = inject(AuthenticationService);
+
   /**
    * Constructor of the class, where we DI all services that we need to use
    * within this guard.
    */
-  public constructor(
-    protected readonly router: Router,
-    protected readonly authenticationService: AuthenticationService,
-  ) {
+  public constructor() {
+    const router: Router = inject(Router);
+    const authenticationService: AuthenticationService = inject(AuthenticationService);
+
     super(router, authenticationService);
   }
 

src/app/auth/guards/authentication.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
 
@@ -9,14 +9,17 @@ import { AuthenticationService } from 'src/app/auth/services';
   providedIn: 'root',
 })
 export class AuthenticationGuard extends BaseAuth {
+  protected readonly router: Router = inject(Router);
+  protected readonly authenticationService: AuthenticationService = inject(AuthenticationService);
+
   /**
    * Constructor of the class, where we DI all services that we need to use
    * within this guard.
    */
-  public constructor(
-    protected readonly router: Router,
-    protected readonly authenticationService: AuthenticationService,
-  ) {
+  public constructor() {
+    const router: Router = inject(Router);
+    const authenticationService: AuthenticationService = inject(AuthenticationService);
+
     super(router, authenticationService);
   }
 

src/app/auth/guards/role-admin.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@@ -10,14 +10,17 @@ import { BaseRole } from 'src/app/auth/guards/base-role';
   providedIn: 'root',
 })
 export class RoleAdminGuard extends BaseRole {
+  protected readonly router: Router = inject(Router);
+  protected readonly store: Store = inject(Store);
+
   /**
    * Constructor of the class, where we DI all services that we need to use
    * within this guard.
    */
-  public constructor(
-    protected readonly router: Router,
-    protected readonly store: Store,
-  ) {
+  public constructor() {
+    const router: Router = inject(Router);
+    const store: Store = inject(Store);
+
     super(router, store);
   }
 

src/app/auth/guards/role-logged.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@@ -10,14 +10,17 @@ import { BaseRole } from 'src/app/auth/guards/base-role';
   providedIn: 'root',
 })
 export class RoleALoggedGuard extends BaseRole {
+  protected readonly router: Router = inject(Router);
+  protected readonly store: Store = inject(Store);
+
   /**
    * Constructor of the class, where we DI all services that we need to use
    * within this guard.
    */
-  public constructor(
-    protected readonly router: Router,
-    protected readonly store: Store,
-  ) {
+  public constructor() {
+    const router: Router = inject(Router);
+    const store: Store = inject(Store);
+
     super(router, store);
   }
 

src/app/auth/guards/role-root.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@@ -10,14 +10,17 @@ import { BaseRole } from 'src/app/auth/guards/base-role';
   providedIn: 'root',
 })
 export class RoleRootGuard extends BaseRole {
+  protected readonly router: Router = inject(Router);
+  protected readonly store: Store = inject(Store);
+
   /**
    * Constructor of the class, where we DI all services that we need to use
    * within this guard.
    */
-  public constructor(
-    protected readonly router: Router,
-    protected readonly store: Store,
-  ) {
+  public constructor() {
+    const router: Router = inject(Router);
+    const store: Store = inject(Store);
+
     super(router, store);
   }
 

src/app/auth/guards/role-user.guard.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@@ -10,14 +10,17 @@ import { BaseRole } from 'src/app/auth/guards/base-role';
   providedIn: 'root',
 })
 export class RoleUserGuard extends BaseRole {
+  protected readonly router: Router = inject(Router);
+  protected readonly store: Store = inject(Store);
+
   /**
    * Constructor of the class, where we DI all services that we need to use
    * within this guard.
    */
-  public constructor(
-    protected readonly router: Router,
-    protected readonly store: Store,
-  ) {
+  public constructor() {
+    const router: Router = inject(Router);
+    const store: Store = inject(Store);
+
     super(router, store);
   }
 

src/app/auth/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, NgForm, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
@@ -41,25 +41,19 @@ export class LoginComponent implements OnInit, OnDestroy {
   @ViewChild('loginFormElement') public loginFormElement!: NgForm;
 
   public readonly loginForm: UntypedFormGroup;
-  public loading: boolean;
-  public focus: boolean;
+  public loading: boolean = false;
+  public focus: boolean = true;
 
-  private readonly subscriptions: Subscription;
-  private isError: boolean;
+  private isError: boolean = false;
+  private readonly formBuilder: UntypedFormBuilder = inject(UntypedFormBuilder);
+  private readonly store: Store = inject(Store);
+  private readonly subscriptions: Subscription = new Subscription();
 
   /**
    * Constructor of the class, where we DI all services that we need to use
    * within this component and initialize needed properties.
    */
-  public constructor(
-    private readonly formBuilder: UntypedFormBuilder,
-    private readonly store: Store,
-  ) {
-    this.loading = false;
-    this.focus = true;
-    this.subscriptions = new Subscription();
-    this.isError = false;
-
+  public constructor() {
     // Initialize login form
     this.loginForm = this.formBuilder.group({
       username: [null, [Validators.required, Validators.minLength(3)]],