Angular

import { inject } from '@angular/core';
import { CanActivateFn, Router, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = async (
  route: ActivatedRouteSnapshot
) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  const isLoggedIn = await authService.getIsLoggedIn();

  const isAuthPage =
    route.routeConfig?.path === 'login' ||
    route.routeConfig?.path === 'registration';

  if (isLoggedIn && isAuthPage) {
    router.navigate(['/']);
    return false;
  }

  if (!isLoggedIn && !isAuthPage) {
    router.navigate(['/login']);
    return false;
  }

  return true;
};

Routing with lazy loading and auth guards

import { Routes } from '@angular/router';
import { authGuard } from './auth/auth.guard';

export const appRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        redirectTo: 'cases',
        pathMatch: 'full',
      },
      {
        path: 'cases',
        canActivate: [authGuard], // Csak bejelentkezett felhasználóknak elérhető
        loadComponent: () =>
          import('./features/cases/cases.component').then(
            (m) => m.CasesComponent
          ),
      },
      {
        path: 'login',
        canActivate: [authGuard], // Ha be vagy jelentkezve, átirányít a főoldalra
        loadComponent: () =>
          import('./auth/login/login.component').then((m) => m.LoginComponent),
      },
      {
        path: 'registration',
        canActivate: [authGuard], // Ha be vagy jelentkezve, átirányít a főoldalra
        loadComponent: () =>
          import('./auth/registration/registration.component').then(
            (m) => m.RegistrationComponent
          ),
      },
      {
        path: '404',
        loadComponent: () =>
          import('./core/not-found/not-found.component').then(
            (m) => m.NotFoundComponent
          ),
      },
      {
        path: '**',
        redirectTo: '404',
      },
    ],
  },
];

proxy.config.json

{
  "/api": {
    "target": "https://your-api-endpoint.com",
    "secure": true,
    "changeOrigin": true
  }
}

angular.json

"serve": {
  "options": {
    "proxyConfig": "proxy.config.json"
  },
},

environment.ts

export const environment = {
  baseUrl: '/api',
};

export const environment = {
    baseUrl: 'https://your-endpoint.net/api'
};

auth.service

private readonly BASE_URL = `${environment.baseUrl}/auth`;

Angular Update Guide

https://angular.dev/update-guide

ng update @angular/core@19 @angular/cli@19

ng g environments

ng add @angular-eslint/schematics

Bundle Size Analyzer

https://esbuild.github.io/analyze/

import { Component, EventEmitter, inject, Output } from '@angular/core';
import { ResultsService } from '../../helpers/results.service';
import { Results } from '../../helpers/results.model';
import { TableModule } from 'primeng/table';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-results-table',
  standalone: true,
  imports: [TableModule, CommonModule],
  templateUrl: './results-table.component.html',
  styleUrl: './results-table.component.scss'
})
export class ResultsTableComponent {
  data: Results[] = [];
  @Output() click = new EventEmitter<string>();

  private readonly _resultsService = inject(ResultsService);

  ngOnInit(): void {
    this.data = this._resultsService.getResultsData() as Results[];
  }

  onClick(item: Results): void {
    console.log('Clicked: ', item.grandPrix);
    this.click.emit(item.grandPrix);
  }
}

<p-table *ngIf="data" [value]="data" [tableStyle]="{ 'min-width': '50rem' }" stripedRows>
    <ng-template pTemplate="header">
        <tr>
            <th>Futam</th>
            <th>Dátum</th>
            <th>Győztes</th>
            <th>Csapat</th>
            <th>Körök száma</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-item>
        <tr class="result-row" (click)="onClick(item)">
            <td>{{ item.grandPrix }}</td>
            <td>{{ item.date | date: 'yyyy-MM-dd' }}</td>
            <td>{{ item.winner }}</td>
            <td>{{ item.team }}</td>
            <td>{{ item.laps }}</td>
        </tr>
    </ng-template>
</p-table>