switcherapi · petruki · Sep 6, 2025 · Sep 6, 2025
diff --git a/angular.json b/angular.json
@@ -59,7 +59,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "3mb",
                   "maximumError": "5mb"
                 },
                 {
@@ -89,7 +89,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "3mb",
                   "maximumError": "5mb"
                 },
                 {

diff --git a/eslint.config.js b/eslint.config.js
@@ -14,7 +14,6 @@ module.exports = tseslint.config(
     ],
     processor: angular.processInlineTemplates,
     rules: {
-      "@angular-eslint/prefer-standalone": "off",
       "@angular-eslint/directive-selector": [
         "error",
         {

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -25,18 +25,18 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@angular/animations": "~20.2.2",
-    "@angular/cdk": "~20.2.1",
-    "@angular/common": "~20.2.2",
-    "@angular/compiler": "~20.2.2",
-    "@angular/core": "~20.2.2",
-    "@angular/forms": "~20.2.2",
-    "@angular/localize": "~20.2.2",
-    "@angular/material": "~20.2.1",
-    "@angular/platform-browser": "~20.2.2",
-    "@angular/platform-browser-dynamic": "~20.2.2",
-    "@angular/router": "~20.2.2",
-    "@angular/service-worker": "~20.2.2",
+    "@angular/animations": "~20.2.4",
+    "@angular/cdk": "~20.2.2",
+    "@angular/common": "~20.2.4",
+    "@angular/compiler": "~20.2.4",
+    "@angular/core": "~20.2.4",
+    "@angular/forms": "~20.2.4",
+    "@angular/localize": "~20.2.4",
+    "@angular/material": "~20.2.2",
+    "@angular/platform-browser": "~20.2.4",
+    "@angular/platform-browser-dynamic": "~20.2.4",
+    "@angular/router": "~20.2.4",
+    "@angular/service-worker": "~20.2.4",
     "@apollo/client": "^3.14.0",
     "@ng-bootstrap/ng-bootstrap": "~19.0.1",
     "@popperjs/core": "^2.11.8",
@@ -46,22 +46,22 @@
     "core-js": "^3.45.1",
     "graphql": "^16.11.0",
     "graphql-tag": "^2.12.6",
-    "ngx-markdown": "^20.0.0",
+    "ngx-markdown": "^20.1.0",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.2.1",
-    "@angular/cli": "^20.2.1",
-    "@angular/compiler-cli": "~20.2.2",
-    "@angular/language-service": "20.2.2",
-    "@types/node": "^24.3.0",
+    "@angular-devkit/build-angular": "^20.2.2",
+    "@angular/cli": "^20.2.2",
+    "@angular/compiler-cli": "~20.2.4",
+    "@angular/language-service": "20.2.4",
+    "@types/node": "^24.3.1",
     "@types/react": "^19.1.12",
     "angular-eslint": "20.2.0",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
-    "typescript-eslint": "8.41.0"
+    "typescript-eslint": "8.42.0"
   },
   "repository": {
     "type": "git",

diff --git a/src/app/_helpers/confirmation-dialog.ts b/src/app/_helpers/confirmation-dialog.ts
@@ -16,9 +16,8 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
         <button type="button" class="btn btn-outline-secondary" (click)="nok()">Cancel</button>
         <button type="button" class="btn btn-danger" (click)="ok()">Ok</button>
       </div>
-      `,
-    standalone: false
-  })
+      `
+})
   export class NgbdModalConfirmComponent {
     modal = inject(NgbActiveModal);
 

diff --git a/src/app/_helpers/toaster/toaster.module.ts b/src/app/_helpers/toaster/toaster.module.ts
@@ -4,16 +4,14 @@ import { ToastsContainerComponent } from '../toasts-container.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
-  declarations: [
-    ToastsContainerComponent
-  ],
-  imports: [
-    CommonModule,
-    NgbModule
-  ],
-  exports: [
-    ToastsContainerComponent
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    imports: [
+        CommonModule,
+        NgbModule,
+        ToastsContainerComponent
+    ],
+    exports: [
+        ToastsContainerComponent
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class ToasterModule { }
diff --git a/src/app/_helpers/toasts-container.component.ts b/src/app/_helpers/toasts-container.component.ts
@@ -1,28 +1,31 @@
 import { Component, TemplateRef, inject } from '@angular/core';
 import { ToastService } from './toast.service';
+import { NgTemplateOutlet } from '@angular/common';
+import { NgbToast } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  selector: 'app-toasts',
-  template: `
-    <ngb-toast
-      *ngFor="let toast of toastService.toasts"
-      [class]="toast.classname"
-      [autohide]="true"
-      [delay]="toast.delay || 3000"
-      (hidden)="toastService.remove(toast)"
-    >
-      <ng-template [ngIf]="isTemplate(toast)" [ngIfElse]="text">
-        <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
-      </ng-template>
-
-      <ng-template #text>{{ toast.textOrTpl }}</ng-template>
-    </ngb-toast>
+    selector: 'app-toasts',
+    template: `
+    @for (toast of toastService.toasts; track toast) {
+      <ngb-toast
+        [class]="toast.classname"
+        [autohide]="true"
+        [delay]="toast.delay || 3000"
+        (hidden)="toastService.remove(toast)"
+      >
+        @if (isTemplate(toast)) {
+          <ng-template [ngTemplateOutlet]="toast.textOrTpl"></ng-template>
+        } @else {
+          {{ toast.textOrTpl }}
+        }
+      </ngb-toast>
+    }
   `,
-  host: {
-    'class': 'toast-container position-fixed bottom-0 start-50 translate-middle-x', 
-    'style': 'z-index: 1200; margin-bottom: .5rem;'
-  },
-  standalone: false
+    host: {
+        'class': 'toast-container position-fixed bottom-0 start-50 translate-middle-x',
+        'style': 'z-index: 1200; margin-bottom: .5rem;'
+    },
+    imports: [NgbToast, NgTemplateOutlet]
 })
 export class ToastsContainerComponent {
   toastService = inject(ToastService);

diff --git a/src/app/app-version/app-version.component.ts b/src/app/app-version/app-version.component.ts
@@ -4,12 +4,13 @@ import { takeUntil } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
 import { AuthService } from '../auth/services/auth.service';
 import { ConsoleLogger } from '../_helpers/console-logger';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
-  selector: 'app-version',
-  templateUrl: './app-version.component.html',
-  styleUrls: ['./app-version.component.css'],
-  standalone: false
+    selector: 'app-version',
+    templateUrl: './app-version.component.html',
+    styleUrls: ['./app-version.component.css'],
+    imports: [MatTooltip]
 })
 export class AppVersionComponent implements OnInit {
   private readonly authService = inject(AuthService);

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -12,17 +12,21 @@
             <div>Menu</div>
         </li>
         <li>
-            <a *ngIf="showHome()" class="topbar-menu-item" routerLink="/" title="Home" (click)="onMenuClick('mainMenu')">
+            @if (showHome()) {
+            <a class="topbar-menu-item" routerLink="/" title="Home" (click)="onMenuClick('mainMenu')">
                 <mat-icon class="menu-item-icon">home</mat-icon>
                 Home
             </a>
+            }
         </li>
         <hr style="margin: 0;">
         <li>
-            <a *ngIf="currentToken" class="topbar-menu-item" routerLink="/dashboard" title="Dashboard" (click)="onMenuClick('mainMenu')">
+            @if (currentToken) {
+            <a class="topbar-menu-item" routerLink="/dashboard" title="Dashboard" (click)="onMenuClick('mainMenu')">
                 <mat-icon class="menu-item-icon">dashboard</mat-icon>
                 Dashboard
             </a>
+            }
         </li>
         <li>
             <a class="topbar-menu-item" routerLink="/documentation" title="Documentation" (click)="onMenuClick('mainMenu')">
@@ -31,37 +35,50 @@
             </a>
         </li>
         <li>
-            <a *ngIf="!currentToken" class="topbar-menu-item" routerLink="/login" title="Sign in" (click)="onMenuClick('mainMenu')">
+            @if (!currentToken) {
+            <a class="topbar-menu-item" routerLink="/login" title="Sign in" (click)="onMenuClick('mainMenu')">
                 <mat-icon class="menu-item-icon">login</mat-icon>
                 Sign in
             </a>
+            }
         </li>
         <hr style="margin: 0;">
         <li>
-            <a *ngIf="!currentToken" class="topbar-menu-item" routerLink="/signup" title="Sign up" (click)="onMenuClick('mainMenu')">
+            @if (!currentToken) {
+            <a class="topbar-menu-item" routerLink="/signup" title="Sign up" (click)="onMenuClick('mainMenu')">
                 <mat-icon class="menu-item-icon">person_add</mat-icon>
                 Sign up
             </a>
+            }
         </li>
     </ul>
 
     <mat-divider class="divider-style"></mat-divider>
 
     <div class="navbar-nav" style="width: 100%;">
-        <a class="nav-item nav-link hide-main-menu" routerLink="/dashboard" *ngIf="currentToken">Dashboard</a>
+        @if (currentToken) {
+        <a class="nav-item nav-link hide-main-menu" routerLink="/dashboard">Dashboard</a>
+        }
         <a class="nav-item nav-link hide-main-menu" routerLink="/documentation">Documentation</a>
-        <a class="nav-item nav-link hide-main-menu" routerLink="/login" *ngIf="!currentToken">Sign in</a>
+        @if (!currentToken) {
+        <a class="nav-item nav-link hide-main-menu" routerLink="/login">Sign in</a>
+        }
         <a id="appTitle" class="nav-item nav-link hide-non-mobile" routerLink="/">Switcher Management</a>
-        <div class="menu-border-left" *ngIf="!currentToken">
+        @if (!currentToken) {
+        <div class="menu-border-left">
             <a id="toggleTheme" class="nav-item nav-link transition" (click)="toggleDarkMode()">
                 <mat-icon>{{ darkMode ? 'brightness_7' : 'brightness_4' }}</mat-icon>
             </a>
             <a id="signUp" class="nav-item nav-link hide-main-menu" routerLink="/signup">Sign up</a>
         </div>
-        <div id="menuProfile" *ngIf="currentToken" class="profile-btn menu-border-left">
+        }
+        @if (currentToken) {
+        <div id="menuProfile" class="profile-btn menu-border-left">
             <img class="profile-avatar switcher-logo transition" src="{{ profileAvatar }}" alt="User avatar">
         </div>
-        <ul id="profileMenu" *ngIf="currentToken" class="navigation-nested nav-user">
+        }
+        @if (currentToken) {
+        <ul id="profileMenu" class="navigation-nested nav-user">
             <li class="menu-header navigation-nested__header">
                 <div>{{ loggedUserName }}</div>
             </li>
@@ -85,6 +102,7 @@
                 </a>
             </li>
         </ul>
+        }
     </div>
 </nav>
 

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterOutlet, RouterLink } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
 import { AuthService } from './auth/services/auth.service';
 import { PwaService } from './services/pwa.service';
 import { environment } from 'src/environments/environment';
@@ -8,7 +10,7 @@ import { environment } from 'src/environments/environment';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  standalone: false
+  imports: [RouterOutlet, RouterLink, MatIconModule, MatDividerModule]
 })
 export class AppComponent implements OnInit, OnDestroy {
   private readonly router = inject(Router);

diff --git a/src/app/app.module.ts b/src/app/app.module.ts