Merge pull request #91 from HideyoshiSolutions/develop

develop - feat: implements a better kubernetes deployment setup

.dockerignore

@@ -0,0 +1,5 @@
+.github
+.gitignore
+Dockerfile
+README.md
+.k8s

.github/workflows/deploy.yml

@@ -0,0 +1,108 @@
+name: ci
+
+on:
+    push:
+    workflow_dispatch:
+      inputs:
+        tag:
+          description: 'Tag to deploy'
+          required: false
+          default: 'latest'
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [22.12.0]
+                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+        steps:
+            - uses: actions/checkout@v3
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: "npm"
+            - run: npm install
+            - run: npm run build --if-present
+
+    docker:
+        needs: [build]
+        runs-on: ubuntu-latest
+        if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop')
+        permissions:
+          contents: read
+          packages: write   # required to push to ghcr.io
+          id-token: write   # optional for OIDC if you use it
+
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v1
+
+            - name: Log in to GHCR
+              uses: docker/login-action@v3
+              with:
+                registry: ghcr.io
+                username: ${{ github.actor }}
+                password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Prepare image tags
+              run: |
+                OWNER=$(echo "${GITHUB_REPOSITORY_OWNER}" | tr '[:upper:]' '[:lower:]')
+                REPO=$(echo "${GITHUB_REPOSITORY#*/}" | tr '[:upper:]' '[:lower:]')
+      
+                # Determine tag
+                if [ "${GITHUB_REF_NAME}" = "main" ]; then
+                  TAG="latest"
+                else
+                  TAG="dev"
+                fi
+      
+                SHORT_SHA=$(echo "${GITHUB_SHA}" | cut -c1-7)
+                IMAGE_BASE="ghcr.io/${OWNER}/${REPO}"
+      
+                echo "IMAGE_LATEST=${IMAGE_BASE}:${TAG}" >> $GITHUB_ENV
+                echo "IMAGE_SHA=${IMAGE_BASE}:sha-${SHORT_SHA}" >> $GITHUB_ENV
+
+            - name: Build Docker image
+              run: |
+                docker build -t $IMAGE_LATEST -t $IMAGE_SHA .
+
+            - name: Push Docker images
+              run: |
+                docker push $IMAGE_LATEST
+                docker push $IMAGE_SHA
+
+    deploy:
+        needs: [docker]
+        runs-on: ubuntu-latest
+        if: github.event_name == 'push' && (github.ref == 'refs/heads/main')
+
+        steps:
+          - uses: actions/checkout@v4
+
+          - name: Set up Kubeconfig
+            uses: azure/setup-kubectl@v3
+            with:
+              method: kubeconfig
+              kubeconfig: ${{ secrets.PORTFOLIO_KUBECONFIG }}
+
+          - name: Deploy to Kubernetes
+            run: |
+              OWNER=$(echo "${GITHUB_REPOSITORY_OWNER}" | tr '[:upper:]' '[:lower:]')
+              REPO=$(echo "${GITHUB_REPOSITORY#*/}" | tr '[:upper:]' '[:lower:]')
+              
+              IMAGE_BASE="ghcr.io/${OWNER}/${REPO}"
+              TAG="${{ github.event.inputs.tag || 'latest' }}"
+              
+              kubectl config set-context --current --namespace=$KUBE_NAMESPACE
+
+              # Apply any other configuration changes if needed
+              envsubst < .k8s/config.yml | kubectl apply -f -
+              envsubst < .k8s/deployment.yaml | kubectl apply -f -
+              envsubst < .k8s/service.yaml | kubectl apply -f -
+              envsubst < .k8s/ingress.yaml | kubectl apply -f -

.github/workflows/docker-publish.yml

@@ -1,61 +0,0 @@
-name: ci
-
-on:
-    push:
-        branches:
-            - "main"
-
-jobs:
-    build:
-        runs-on: ubuntu-latest
-
-        strategy:
-            matrix:
-                node-version: [18.x]
-                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-        steps:
-            - uses: actions/checkout@v3
-            - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v3
-              with:
-                  node-version: ${{ matrix.node-version }}
-                  cache: "npm"
-            - run: npm install
-            - run: npm run build --if-present
-
-    docker:
-        needs: [build]
-        runs-on: ubuntu-latest
-
-        steps:
-            - name: Set up QEMU
-              uses: docker/setup-qemu-action@v1
-
-            - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@v1
-
-            - name: Login to DockerHub
-              uses: docker/login-action@v1
-              with:
-                  username: ${{ secrets.DOCKERHUB_USERNAME }}
-                  password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-            - name: Build and push
-              uses: docker/build-push-action@v2
-              with:
-                  platforms: linux/amd64,linux/arm64
-                  push: true
-                  tags: yoshiunfriendly/frontend-hideyoshi.com:latest
-
-    run-dispatcher:
-        needs: docker
-        runs-on: ubuntu-latest
-        steps:
-            # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-            - name: Runs Infra-Hideyoshi.com Deployment Dispatcher
-              run: |
-                  curl -X POST https://api.github.com/repos/HideyoshiSolutions/infra-hideyoshi.com/dispatches \
-                  -H 'Accept: application/vnd.github.everest-preview+json' \
-                  -u ${{ secrets.ACTIONS_KEY }} \
-                  --data '{"event_type": "refresh-deployments", "client_payload": { "deployments": "frontend-deployment" }}'

.github/workflows/vercel-cleanup-pr.yml

@@ -1,27 +0,0 @@
-name: vercel-cleanup-pr
-
-on:
-    pull_request:
-        types: [closed]
-
-env:
-    VERCEL_CLI_TOKEN: ${{ secrets.VERCEL_CLI_TOKEN }}
-    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-    GITHUB_PR_ID: ${{ github.event.number }}
-
-jobs:
-    cleanup:
-        runs-on: ubuntu-latest
-        steps:
-            - name: Cleanup Vercel Deployments
-              run: |
-                closed_deployments=$(curl "https://api.vercel.com/v6/deployments?projectId=$VERCEL_PROJECT_ID" \
-                    -H "Accept: application/json" \
-                    -H "Authorization: Bearer ${VERCEL_CLI_TOKEN}" | jq -r ".deployments[] | select(.meta.githubPrId == \"${GITHUB_PR_ID}\") | .uid")
-                for deployment in $closed_deployments; do
-                    echo "Deleting Deployment: $deployment"
-                    curl "https://api.vercel.com/v6/now/deployments/$deployment" \
-                        -X DELETE \
-                        -H "Authorization: Bearer ${VERCEL_CLI_TOKEN}"
-                done
-

.github/workflows/vercel-cleanup-previous-preview.yml

@@ -1,33 +0,0 @@
-name: vercel-cleanup-preview
-
-on:
-    push:
-        branches:
-            - '*'
-            - '!main'
-            - '!devel'
-
-env:
-    VERCEL_CLI_TOKEN: ${{ secrets.VERCEL_CLI_TOKEN }}
-    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-    GIT_PREVIOS_COMMIT: ${{ github.event.before }}
-
-
-jobs:
-    cleanup:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v3
-            - name: Cleanup Vercel Deployments
-              run: |
-
-                invalid_deployments=$(curl "https://api.vercel.com/v6/deployments?projectId=$VERCEL_PROJECT_ID" \
-                    -H "Accept: application/json" \
-                    -H "Authorization: Bearer ${VERCEL_CLI_TOKEN}" | jq -r ".deployments[] | select(.meta.githubCommitSha == \"${GIT_PREVIOS_COMMIT}\") | .uid")
-
-                for deployment in $invalid_deployments; do
-                    echo "Deleting Deployment: $deployment"
-                    curl "https://api.vercel.com/v6/now/deployments/$deployment" \
-                        -X DELETE \
-                        -H "Authorization: Bearer ${VERCEL_CLI_TOKEN}"
-                done

.k8s/config.yml

@@ -0,0 +1,8 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  namespace: ${KUBE_NAMESPACE}
+  name: frontend-config
+data:
+  BACKEND_URL: "${BACKEND_URL}"
+  GITHUB_USER: "${GH_USER}"

.k8s/deployment.yaml

@@ -0,0 +1,59 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  namespace: ${KUBE_NAMESPACE}
+  name: frontend-deployment
+  labels:
+    app: frontend
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: frontend
+  template:
+    metadata:
+      labels:
+        app: frontend
+    spec:
+      nodeSelector:
+        ${WORKER_NODE_LABEL}
+      initContainers:
+        - name: wait-backend-init
+          image: busybox:latest
+          args:
+            - /bin/sh
+            - -c
+            - >
+              set -x;
+              while [ $(curl -sw '%{http_code}' "backend-service:8000/health" -o /dev/null) -ne 200 ]; do
+              sleep 15;
+              done
+      containers:
+        - name: frontend
+          image: ${IMAGE_BASE}:${TAG}
+          imagePullPolicy: "Always"
+          resources:
+            requests:
+              memory: "128Mi"
+              cpu: "75m"
+            limits:
+              memory: "128Mi"
+              cpu: "256m"
+          ports:
+            - containerPort: 5000
+          readinessProbe:
+            httpGet:
+              path: /
+              port: 5000
+            initialDelaySeconds: 10
+          livenessProbe:
+            httpGet:
+              path: /
+              port: 5000
+            initialDelaySeconds: 10
+          envFrom:
+            - configMapRef:
+                name: frontend-config
+          env:
+            - name: PORT
+              value: "5000"

.k8s/ingress.yaml

@@ -0,0 +1,25 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  namespace: ${KUBE_NAMESPACE}
+  name: nginx-ingress
+  annotations:
+    kubernetes.io/ingress.class: nginx
+    nginx.ingress.kubernetes.io/use-regex: "true"
+    nginx.ingress.kubernetes.io/rewrite-target: /
+spec:
+  tls:
+    - hosts:
+        - ${KUBE_DOMAIN}
+      secretName: letsencrypt-cluster-certificate-tls
+  rules:
+    - host: ${KUBE_DOMAIN}
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: frontend-service
+                port:
+                  number: 5000

.k8s/service.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: Service
+metadata:
+  namespace: ${KUBE_NAMESPACE}
+  name: frontend-service
+spec:
+  selector:
+    app: frontend
+  ports:
+    - port: 5000
+      protocol: TCP
+      targetPort: 5000
+  type: ClusterIP

Dockerfile

@@ -1,16 +1,30 @@
-FROM node:18-alpine
+FROM node:22.12-alpine AS base
+
+FROM base AS build
 
 WORKDIR /app
 
+COPY package*.json ./
+
+RUN npm install
+
+
+FROM base AS prod
+
+WORKDIR /app
+
+COPY --from=build /app/node_modules ./node_modules
 COPY . .
 
+
+RUN npm install -g @angular/cli@20.3.8
+
+
 RUN apk add --update gettext python3 py3-pip py3-setuptools make g++ && \
     rm -rf /var/cache/apk/*
 
-RUN npm install
-RUN npm install -g @angular/cli@16
-
 RUN npm run build:prod
 
 EXPOSE 5000-7000
+
 CMD ["npm", "run", "start:prod"]

angular.json

@@ -11,12 +11,15 @@
             "prefix": "app",
             "architect": {
                 "build": {
-                    "builder": "@angular-devkit/build-angular:browser",
+                    "builder": "@angular/build:application",
                     "options": {
-                        "outputPath": "dist/frontend-hideyoshi.com",
+                        "outputPath": {
+                          "base": "dist/frontend-hideyoshi.com"
+                        },
                         "index": "src/index.html",
-                        "main": "src/main.ts",
+                        "polyfills": [
-                        "polyfills": "src/polyfills.ts",
+                          "src/polyfills.ts"
+                        ],
                         "tsConfig": "tsconfig.app.json",
                         "allowedCommonJsDependencies": [
                             "ts-interface-checker",
@@ -39,21 +42,21 @@
                             "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
                             "node_modules/cookieconsent/build/cookieconsent.min.js"
                         ],
-                        "serviceWorker": true,
+                        "serviceWorker": "ngsw-config.json",
-                        "ngswConfigPath": "ngsw-config.json"
+                        "browser": "src/main.ts"
                     },
                     "configurations": {
                         "production": {
                             "budgets": [
                                 {
                                     "type": "initial",
-                                    "maximumWarning": "1mb",
+                                    "maximumWarning": "2.5mb",
-                                    "maximumError": "1.5mb"
+                                    "maximumError": "5mb"
                                 },
                                 {
                                     "type": "anyComponentStyle",
-                                    "maximumWarning": "2.5kb",
+                                    "maximumWarning": "5kb",
-                                    "maximumError": "5kb"
+                                    "maximumError": "10kb"
                                 }
                             ],
                             "fileReplacements": [
@@ -63,12 +66,10 @@
                                 }
                             ],
                             "outputHashing": "all",
-                            "serviceWorker": true
+                            "serviceWorker": "ngsw-config.json"
                         },
                         "development": {
-                            "buildOptimizer": false,
                           "optimization": false,
-                            "vendorChunk": true,
                             "extractLicenses": false,
                             "sourceMap": true,
                             "namedChunks": true
@@ -77,25 +78,25 @@
                     "defaultConfiguration": "production"
                 },
                 "serve": {
-                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "builder": "@angular/build:dev-server",
                     "configurations": {
                         "production": {
-                            "browserTarget": "frontend-hideyoshi.com:build:production"
+                          "buildTarget": "frontend-hideyoshi.com:build:production"
                         },
                         "development": {
-                            "browserTarget": "frontend-hideyoshi.com:build:development"
+                          "buildTarget": "frontend-hideyoshi.com:build:development"
                         }
                     },
                     "defaultConfiguration": "development"
                 },
                 "extract-i18n": {
-                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "builder": "@angular/build:extract-i18n",
                     "options": {
-                        "browserTarget": "frontend-hideyoshi.com:build"
+                      "buildTarget": "frontend-hideyoshi.com:build"
                     }
                 },
                 "test": {
-                    "builder": "@angular-devkit/build-angular:karma",
+                    "builder": "@angular/build:application",
                     "options": {
                         "main": "src/test.ts",
                         "polyfills": "src/polyfills.ts",
@@ -129,6 +130,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

@@ -1,33 +1,27 @@
 {
   "name": "frontend-hideyoshi.com",
-    "version": "0.0.0",
-    "scripts": {
-        "start": "node ./set_env.js && node ./server.js",
-        "serve": "node ./set_env.js && ng serve",
-        "build": "ng build",
-        "start:prod": "node ./set_env.js --prod && node ./server.js",
-        "serve:prod": "node ./set_env.js --prod && ng serve --configuration=production",
-        "build:prod": "ng build --configuration=production"
-    },
-    "proxy": {
-        "/callback": {
-            "target": "http://localhost:8070"
-        }
-    },
   "private": true,
+  "scripts": {
+    "build": "ng build",
+    "build:prod": "ng build --configuration=production",
+    "serve": "node ./set_env.js && ng serve",
+    "serve:prod": "node ./set_env.js --prod && ng serve --configuration=production",
+    "start": "node ./set_env.js && node ./server.js",
+    "start:prod": "node ./set_env.js --prod && node ./server.js"
+  },
   "dependencies": {
-        "@angular/animations": "^16.2.2",
+    "@angular/animations": "^20.3.9",
-        "@angular/cdk": "^16.2.1",
+    "@angular/cdk": "^19.2.19",
-        "@angular/common": "^16.2.2",
+    "@angular/common": "^20.3.9",
-        "@angular/compiler": "^16.2.2",
+    "@angular/compiler": "^20.3.9",
-        "@angular/core": "^16.2.2",
+    "@angular/core": "^20.3.9",
-        "@angular/forms": "^16.2.2",
+    "@angular/forms": "^20.3.9",
-        "@angular/material": "^16.2.1",
+    "@angular/material": "^19.2.19",
-        "@angular/platform-browser": "^16.2.2",
+    "@angular/platform-browser": "^20.3.9",
-        "@angular/platform-browser-dynamic": "^16.2.2",
+    "@angular/platform-browser-dynamic": "^20.3.9",
-        "@angular/router": "^16.2.2",
+    "@angular/router": "^20.3.9",
-        "@angular/service-worker": "^16.2.2",
+    "@angular/service-worker": "^20.3.9",
-        "@fortawesome/angular-fontawesome": "^0.13.0",
+    "@fortawesome/angular-fontawesome": "^3.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
@@ -38,37 +32,38 @@
     "bootstrap": "^4.6.2",
     "cookieconsent": "^3.1.1",
     "cors": "^2.8.5",
+    "dotenv": "^17.2.3",
     "envsub": "^4.1.0",
     "express": "^4.18.1",
     "jquery": "^3.6.0",
     "ng-apexcharts": "^1.8.0",
-        "ngx-cookie-service": "^16.0.1",
+    "ngx-cookie-service": "^20.1.1",
     "ngx-cookieconsent": "^4.0.2",
     "ngx-glide": "^16.0.0",
     "normalize.css": "^8.0.1",
     "rxjs": "~7.5.0",
     "ts-interface-checker": "^1.0.2",
     "tslib": "^2.3.0",
-        "zone.js": "~0.13.1"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-        "@angular-devkit/build-angular": "^16.2.0",
+    "@angular-eslint/builder": "^19.8.1",
-        "@angular-eslint/builder": "^16.1.1",
+    "@angular-eslint/eslint-plugin": "^20.5.0",
-        "@angular-eslint/eslint-plugin": "16.1.1",
+    "@angular-eslint/eslint-plugin-template": "^20.5.0",
-        "@angular-eslint/eslint-plugin-template": "16.1.1",
+    "@angular-eslint/schematics": "^20.5.0",
-        "@angular-eslint/schematics": "16.1.1",
+    "@angular-eslint/template-parser": "^20.5.0",
-        "@angular-eslint/template-parser": "16.1.1",
+    "@angular/build": "^20.3.8",
-        "@angular/cli": "^16.2.0",
+    "@angular/cli": "^20.3.8",
-        "@angular/compiler-cli": "^16.2.2",
+    "@angular/compiler-cli": "^20.3.9",
     "@types/jasmine": "~4.0.0",
-        "@types/node": "^18.11.19",
+    "@types/node": "^22.18.13",
-        "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
-        "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/parser": "^8.46.2",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "jasmine-core": "~4.1.0",
-        "karma": "~6.3.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.0.0",
@@ -76,6 +71,11 @@
     "prettier": "^3.0.3",
     "prettier-eslint": "^16.1.1",
     "ts-interface-builder": "^0.3.3",
-        "typescript": "~4.9.5"
+    "typescript": "~5.8.3"
+  },
+  "proxy": {
+    "/callback": {
+      "target": "http://localhost:8070"
+    }
   }
 }

src/app/app.component.ts

@@ -9,6 +9,7 @@ import {CookieConsertService} from './shared/cookie-consent/cookie-consert.servi
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
+    standalone: false
 })
 export class AppComponent implements OnInit {
     title = 'frontend-hideyoshi.com';

src/app/footer/footer.component.ts

@@ -5,6 +5,7 @@ import {faGithub, faLinkedinIn, faTwitter,} from '@fortawesome/free-brands-svg-i
     selector: 'app-footer',
     templateUrl: './footer.component.html',
     styleUrls: ['./footer.component.css'],
+    standalone: false
 })
 export class FooterComponent {
     _githubIcon = faGithub;

src/app/header/header-dropdown/header-dropdown.component.html

@@ -9,28 +9,36 @@
     (@dropdownState.done)="
         $event.element.style.display = state ? 'block' : 'none'
     "
->
+  >
   <div class="info">
     <h3>{{ this.user ? this.user.username : "User Account" }}</h3>
   </div>
   <div #management>
-        <ul class="user-management" *ngIf="!this.user">
+    @if (!this.user) {
-            <li *ngFor="let option of mainOptions"
+      <ul class="user-management">
+        @for (option of mainOptions; track option) {
+          <li
             class="dropdown-item" (click)=option.callback()>
             <div class="icon-box">
               <fa-icon [icon]="option.icon"></fa-icon>
             </div>
             <p>{{option.text}}</p>
           </li>
+        }
       </ul>
-        <ul class="user-management" *ngIf="this.user">
+    }
-            <li *ngFor="let option of userOptions"
+    @if (this.user) {
+      <ul class="user-management">
+        @for (option of userOptions; track option) {
+          <li
             class="dropdown-item" (click)=option.callback()>
             <div class="icon-box">
               <fa-icon [icon]="option.icon"></fa-icon>
             </div>
             <p>{{option.text}}</p>
           </li>
+        }
       </ul>
+    }
   </div>
 </div>

src/app/header/header-dropdown/header-dropdown.component.ts

@@ -13,22 +13,17 @@ import {Value} from "@sinclair/typebox/value";
     styleUrls: ['./header-dropdown.component.css'],
     animations: [
         trigger('dropdownState', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 opacity: '0',
-                }),
+            })),
-            ),
+            state('show', style({
-            state(
-                'show',
-                style({
                 opacity: '1',
-                }),
+            })),
-            ),
             transition('hide => show', animate('20ms ease-in')),
             transition('show => hide', animate('5ms ease-out')),
         ]),
     ],
+    standalone: false
 })
 export class HeaderDropdownComponent implements OnInit, OnDestroy {
     mainOptions: { text: string, icon: IconDefinition, callback: () => void }[] = [

src/app/header/header-popup/callback/callback.component.ts

@@ -6,6 +6,7 @@ import {AuthService} from 'src/app/shared/service/auth.service';
     selector: 'app-callback',
     templateUrl: './callback.component.html',
     styleUrls: ['./callback.component.css'],
+    standalone: false
 })
 export class CallbackComponent implements OnInit {
     constructor(

src/app/header/header-popup/error-box/error-box.component.html

@@ -1,3 +1,5 @@
-<div class="error-box" *ngIf="errorMessage">
+@if (errorMessage) {
+  <div class="error-box">
     {{ errorMessage }}
-</div>
+  </div>
+}

src/app/header/header-popup/error-box/error-box.component.ts

@@ -4,6 +4,7 @@ import {Component, Input} from '@angular/core';
     selector: 'app-error-box',
     templateUrl: './error-box.component.html',
     styleUrls: ['./error-box.component.css'],
+    standalone: false
 })
 export class ErrorBoxComponent {
     @Input()

src/app/header/header-popup/help/help.component.ts

@@ -4,6 +4,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
     selector: 'app-help',
     templateUrl: './help.component.html',
     styleUrls: ['./help.component.css'],
+    standalone: false
 })
 export class HelpComponent {
     @Input()

src/app/header/header-popup/login/login.component.html

@@ -2,7 +2,7 @@
   [state]="state"
   (stateChange)="onStateChange($event)"
   [ignoreClickOutside]="ignoreClickOutside"
->
+  >
   <div
     class="container m-0 overflow-hidden"
     [@resizeContainerForErrorMessage]="hideErrorMessage()"
@@ -65,16 +65,18 @@
             [disabled]="isCookieBlocked"
             (click)="onGoogleLogin()"
             >
+            @if (!isCookieBlocked) {
               <mat-icon
-                            *ngIf="!isCookieBlocked"
                 style="width: 50px; height: 30px"
                 svgIcon="google-logo"
               ></mat-icon>
+            }
+            @if (isCookieBlocked) {
               <mat-icon
-                            *ngIf="isCookieBlocked"
                 style="width: 50px; height: 30px"
                 svgIcon="google-disabled-logo"
               ></mat-icon>
+            }
             Login With Google
           </button>
           <button

src/app/header/header-popup/login/login.component.ts

@@ -33,56 +33,39 @@ const GITHUB_LOGO_SVG = 'assets/img/providers/github.svg';
     styleUrls: ['./login.component.css'],
     animations: [
         trigger('resizeContainerForErrorMessage', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 height: '100px',
                 width: '320px',
-                }),
+            })),
-            ),
+            transition('show => hide', group([
-            transition(
-                'show => hide',
-                group([
                 query('@*', animateChild(), { optional: true }),
                 animate('1s ease'),
-                ]),
+            ])),
-            ),
         ]),
         trigger('showErrorMessage', [
-            state(
+            state('show', style({
-                'show',
-                style({
                 opacity: 1,
                 height: '100px',
                 width: '320px',
-                }),
+            })),
-            ),
+            state('hide', style({
-            state(
-                'hide',
-                style({
                 opacity: 0,
                 height: '0px',
                 width: '0px',
-                }),
+            })),
-            ),
             transition('* => show', animate('500ms ease-in')),
         ]),
         trigger('hideAuthContainer', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 opacity: 0,
-                }),
+            })),
-            ),
+            transition('show => hide', group([
-            transition(
-                'show => hide',
-                group([
                 query('@*', animateChild(), { optional: true }),
                 animate('250ms ease-out'),
-                ]),
+            ])),
-            ),
         ]),
     ],
+    standalone: false
 })
 export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input()

src/app/header/header-popup/my-profile/my-profile.component.ts

@@ -13,56 +13,39 @@ import {faFileUpload} from '@fortawesome/free-solid-svg-icons';
     styleUrls: ['./my-profile.component.css'],
     animations: [
         trigger('resizeContainerForErrorMessage', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 height: '100px',
                 width: '320px',
-                }),
+            })),
-            ),
+            transition('show => hide', group([
-            transition(
-                'show => hide',
-                group([
                 query('@*', animateChild(), { optional: true }),
                 animate('1s ease'),
-                ]),
+            ])),
-            ),
         ]),
         trigger('showErrorMessage', [
-            state(
+            state('show', style({
-                'show',
-                style({
                 opacity: 1,
                 height: '100px',
                 width: '320px',
-                }),
+            })),
-            ),
+            state('hide', style({
-            state(
-                'hide',
-                style({
                 opacity: 0,
                 height: '0px',
                 width: '0px',
-                }),
+            })),
-            ),
             transition('* => show', animate('500ms ease-in')),
         ]),
         trigger('hideAuthContainer', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 opacity: 0,
-                }),
+            })),
-            ),
+            transition('show => hide', group([
-            transition(
-                'show => hide',
-                group([
                 query('@*', animateChild(), { optional: true }),
                 animate('250ms ease-out'),
-                ]),
+            ])),
-            ),
         ]),
     ],
+    standalone: false
 })
 export class MyProfileComponent implements OnInit {
     @Input()

src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.ts

@@ -5,6 +5,7 @@ import {AuthService} from '../../../../shared/service/auth.service';
     selector: 'app-profile-picture-picker',
     templateUrl: './profile-picture-picker.component.html',
     styleUrls: ['./profile-picture-picker.component.css'],
+    standalone: false
 })
 export class ProfilePicturePickerComponent {
     @Output()

src/app/header/header-popup/signup/signup.component.ts

@@ -22,56 +22,39 @@ const GITHUB_LOGO_SVG = 'assets/img/providers/github.svg';
     styleUrls: ['./signup.component.css'],
     animations: [
         trigger('resizeContainerForErrorMessage', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 height: '100px',
                 width: '320px',
-                }),
+            })),
-            ),
+            transition('show => hide', group([
-            transition(
-                'show => hide',
-                group([
                 query('@*', animateChild(), { optional: true }),
                 animate('1s ease'),
-                ]),
+            ])),
-            ),
         ]),
         trigger('showErrorMessage', [
-            state(
+            state('show', style({
-                'show',
-                style({
                 opacity: 1,
                 height: '100px',
                 width: '320px',
-                }),
+            })),
-            ),
+            state('hide', style({
-            state(
-                'hide',
-                style({
                 opacity: 0,
                 height: '0px',
                 width: '0px',
-                }),
+            })),
-            ),
             transition('* => show', animate('500ms ease-in')),
         ]),
         trigger('hideAuthContainer', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 opacity: 0,
-                }),
+            })),
-            ),
+            transition('show => hide', group([
-            transition(
-                'show => hide',
-                group([
                 query('@*', animateChild(), { optional: true }),
                 animate('250ms ease-out'),
-                ]),
+            ])),
-            ),
         ]),
     ],
+    standalone: false
 })
 export class SignupComponent implements OnInit {
     @Input()

src/app/header/header-slider/header-slider.component.ts

@@ -7,18 +7,12 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
     styleUrls: ['./header-slider.component.css'],
     animations: [
         trigger('slideState', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 transform: 'translateX(100%)',
-                }),
+            })),
-            ),
+            state('show', style({
-            state(
-                'show',
-                style({
                 transform: 'translateX(0%)',
-                }),
+            })),
-            ),
             transition('hide => show', [
                 group([
                     query('@*', animateChild(), { optional: true }),
@@ -33,6 +27,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
             ]),
         ]),
     ],
+    standalone: false
 })
 export class HeaderSliderComponent {
     @Input()

src/app/header/header-slider/nav-slider/nav-slider.component.html

@@ -1,8 +1,8 @@
 <div class="links-container">
   <div class="nav-links">
     <ul>
+      @for (page of pages; track page; let i = $index) {
         <li
-                *ngFor="let page of pages; let i = index"
                 [@animateSliderItem]="{
                     value: itemStatus,
                     params: {
@@ -15,8 +15,9 @@
           {{ page.name }}
         </a>
       </li>
+    }
   </ul>
-    </div>
+</div>
 </div>
 
 <div class="profile-container">
@@ -32,13 +33,14 @@
   #profile
   >
   <div class="profile-btn" (click)="onProfileButtonClicked()">
+    @if (!loggedUser || !loggedUser.profilePictureUrl) {
       <fa-icon
-                *ngIf="!loggedUser || !loggedUser.profilePictureUrl"
         class="fas fa-user"
         [icon]="userIcon"
       ></fa-icon>
+    }
+    @if (!!loggedUser && !!loggedUser.profilePictureUrl) {
       <img
-                *ngIf="!!loggedUser && !!loggedUser.profilePictureUrl"
         class="profile-picture"
         [ngSrc]="loggedUser.profilePictureUrl"
         width="50"
@@ -46,6 +48,7 @@
         alt="Profile Picture"
         priority
         />
-        </div>
+    }
   </div>
 </div>
+</div>

src/app/header/header-slider/nav-slider/nav-slider.component.ts

@@ -10,6 +10,7 @@ import {Value} from "@sinclair/typebox/value";
     selector: 'app-nav-slider',
     templateUrl: './nav-slider.component.html',
     styleUrls: ['./nav-slider.component.css'],
+    standalone: false
 })
 export class NavSliderComponent
     extends SliderItemComponent

src/app/header/header-slider/user-slider/user-slider.component.html

@@ -1,11 +1,10 @@
 <div class="user-container">
   <div class="user-options">
     <ul>
+      @for (
+        options of user ? userOptions : userlessOptions; track
+        options; let i = $index) {
         <li
-                *ngFor="
-                    let options of user ? userOptions : userlessOptions;
-                    let i = index
-                "
                 [@animateSliderItem]="{
                     value: itemStatus,
                     params: {
@@ -18,6 +17,7 @@
           {{ options.name }}
         </a>
       </li>
+    }
   </ul>
-    </div>
+</div>
 </div>

src/app/header/header-slider/user-slider/user-slider.component.ts

@@ -9,6 +9,7 @@ import {Value} from "@sinclair/typebox/value";
     selector: 'app-user-slider',
     templateUrl: './user-slider.component.html',
     styleUrls: ['./user-slider.component.css'],
+    standalone: false
 })
 export class UserSliderComponent extends SliderItemComponent implements OnInit {
     userlessOptions = [

src/app/header/header.component.html

@@ -7,9 +7,11 @@
     </div>
     <div class="nav-links">
       <ul class="link-container">
-                <li *ngFor="let page of pages">
+        @for (page of pages; track page) {
+          <li>
             <a [routerLink]="page.route">{{ page.name }}</a>
           </li>
+        }
       </ul>
     </div>
 
@@ -19,13 +21,14 @@
         (click)="toogleProfileDropdown()"
         #profileBtn
         >
+        @if (!loggedUser || !loggedUser.profilePictureUrl) {
           <fa-icon
-                    *ngIf="!loggedUser || !loggedUser.profilePictureUrl"
             class="fas fa-user"
             [icon]="userIcon"
           ></fa-icon>
+        }
+        @if (!!loggedUser && !!loggedUser.profilePictureUrl) {
           <img
-                    *ngIf="!!loggedUser && !!loggedUser.profilePictureUrl"
             class="profile-picture"
             [ngSrc]="loggedUser.profilePictureUrl"
             width="50"
@@ -33,6 +36,7 @@
             alt="Profile Picture"
             priority
             />
+        }
       </div>
 
       <app-header-dropdown

src/app/header/header.component.ts

@@ -13,6 +13,7 @@ import {Value} from "@sinclair/typebox/value";
     selector: 'app-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.css'],
+    standalone: false
 })
 export class HeaderComponent implements OnInit, OnDestroy {
     pages: { name: string; route: string }[] = [

src/app/home/home.component.ts

@@ -4,6 +4,7 @@ import {Component} from '@angular/core';
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css'],
+    standalone: false
 })
 export class HomeComponent {
     constructor() {}

src/app/home/stack-slider/stack-card/stack-card.component.ts

@@ -23,6 +23,7 @@ import {animate, state, style, transition, trigger} from "@angular/animations";
             ]),
         ])
     ],
+    standalone: false
 })
 export class StackCardComponent {
     @Input()

src/app/home/stack-slider/stack-slider.component.html

@@ -1,5 +1,9 @@
-<ngx-glide #ngxGlide class="container stack-slider" *ngIf="stacks && stacks.length > 0">
+@if (stacks && stacks.length > 0) {
-    <app-stack-card *ngFor="let stack of stacks" class="slider-card" [stack]="stack"
+  <ngx-glide #ngxGlide class="container stack-slider">
+    @for (stack of stacks; track stack) {
+      <app-stack-card class="slider-card" [stack]="stack"
         [inFocus]="isInFocus(stack)">
       </app-stack-card>
-</ngx-glide>
+    }
+  </ngx-glide>
+}

src/app/home/stack-slider/stack-slider.component.ts

@@ -6,7 +6,8 @@ import {Stack} from "../../shared/model/stack/stack.model";
 @Component({
     selector: 'app-stack-slider',
     templateUrl: './stack-slider.component.html',
-    styleUrls: ['./stack-slider.component.css']
+    styleUrls: ['./stack-slider.component.css'],
+    standalone: false
 })
 export class StackSliderComponent implements AfterViewInit {
     @ViewChild('ngxGlide')

src/app/projects/project-card/project-card.component.html

@@ -1,4 +1,4 @@
-  <div class="card container">
+<div class="card container">
   <div class="card-content">
     <div class="card-content-h">
       <h2 class="card-title">
@@ -7,8 +7,10 @@
       <p class="card-text">{{project.description}}</p>
     </div>
     <div class="card-content-f row">
-                <div class="card-languages col-md-9" *ngIf="hasLanguage" id="language-chart">
+      @if (hasLanguage) {
-                    <apx-chart *ngIf="chartOptions !== undefined"
+        <div class="card-languages col-md-9" id="language-chart">
+          @if (chartOptions !== undefined) {
+            <apx-chart
               [series]="chartOptions.series"
               [colors]="chartOptions.colors"
               [chart]="chartOptions.chart"
@@ -17,14 +19,18 @@
               [plotOptions]="chartOptions.plotOptions"
               [dataLabels]="chartOptions.dataLabels">
             </apx-chart>
+          }
         </div>
+      }
       <div class="card-stats" [ngClass]="hasLanguage ? 'col-md-3' : 'stats-inline'">
-                    <div class="stat-item" *ngIf="hasLicense">
+        @if (hasLicense) {
+          <div class="stat-item">
             <div class="stat-icon">
               <fa-icon [icon]="faLicense"></fa-icon>
             </div>
             <span>{{project.license}}</span>
           </div>
+        }
         <div class="stat-item">
           <div class="stat-icon">
             <fa-icon [icon]="faStars"></fa-icon>
@@ -46,4 +52,4 @@
       </div>
     </div>
   </div>
-  </div>
+</div>

src/app/projects/project-card/project-card.component.ts

@@ -24,7 +24,8 @@ export type ChartOptions = {
 @Component({
     selector: 'app-project-card',
     templateUrl: './project-card.component.html',
-    styleUrls: ['./project-card.component.css']
+    styleUrls: ['./project-card.component.css'],
+    standalone: false
 })
 export class ProjectCardComponent implements OnInit {
     @Input() inverted: boolean = false;

src/app/projects/projects.component.html

@@ -1,6 +1,8 @@
 <div class="container">
-    <div *ngFor="let p of projects; index as i;trackBy: identifyProject">
+  @for (p of projects; track identifyProject(i, p); let i = $index) {
+    <div>
       <app-project-card [project]="p" [inverted]="i % 2 !== 0">
       </app-project-card>
     </div>
+  }
 </div>

src/app/projects/projects.component.ts

@@ -5,7 +5,8 @@ import {Project} from "../shared/model/project/project.model";
 @Component({
     selector: 'app-projects',
     templateUrl: './projects.component.html',
-    styleUrls: ['./projects.component.css']
+    styleUrls: ['./projects.component.css'],
+    standalone: false
 })
 export class ProjectsComponent implements OnInit {
     projects!: Project[];

src/app/shared/components/popup/popup.component.ts

@@ -7,36 +7,25 @@ import {Component, EventEmitter, Input, Output,} from '@angular/core';
     styleUrls: ['./popup.component.css'],
     animations: [
         trigger('popupState', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 opacity: '0',
                 zIndex: 2
-                }),
+            })),
-            ),
+            state('show', style({
-            state(
-                'show',
-                style({
                 opacity: '1',
                 zIndex: 2
-                }),
+            })),
-            ),
+            transition('* => show', group([
-            transition(
-                '* => show',
-                group([
                 query('@*', animateChild(), { optional: true }),
                 animate('250ms ease-in'),
-                ]),
+            ])),
-            ),
+            transition('show => hide', group([
-            transition(
-                'show => hide',
-                group([
                 query('@*', animateChild(), { optional: true }),
                 animate('250ms ease-out'),
-                ]),
+            ])),
-            ),
         ]),
     ],
+    standalone: false
 })
 export class PopupComponent {
     @Input()

src/app/shared/components/slider-item/slider-item.component.ts

@@ -7,36 +7,29 @@ import {Component, Input} from '@angular/core';
     styleUrls: ['./slider-item.component.css'],
     animations: [
         trigger('animateSliderItem', [
-            state(
+            state('hide', style({
-                'hide',
-                style({
                 opacity: '0',
                 transform: 'translateX(150px)',
-                }),
+            }), {
-                {
                 params: {
                     fadeInTime: 600,
                     fadeOutTime: 600,
                 },
-                },
+            }),
-            ),
+            state('show', style({
-            state(
-                'show',
-                style({
                 opacity: '1',
                 transform: 'translateX(0px)',
-                }),
+            }), {
-                {
                 params: {
                     fadeOutTime: 600,
                     fadeInTime: 600,
                 },
-                },
+            }),
-            ),
             transition('hide => show', animate(`{{ fadeInTime }}s ease-in`)),
             transition('show => hide', animate(`{{ fadeOutTime }}s ease-out`)),
         ]),
     ],
+    standalone: false
 })
 export class SliderItemComponent {
     @Input()

src/app/shared/directive/clicked-outside/clicked-outside.directive.ts

@@ -1,9 +1,10 @@
-import {DOCUMENT} from '@angular/common';
+
-import {AfterViewInit, Directive, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output,} from '@angular/core';
+import {AfterViewInit, Directive, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, DOCUMENT} from '@angular/core';
 import {filter, fromEvent, Subscription,} from 'rxjs';
 
 @Directive({
     selector: '[appClickedOutside]',
+    standalone: false
 })
 export class ClickedOutsideDirective implements AfterViewInit, OnDestroy {
     @Input()

src/app/shared/service-worker/update.service.ts

@@ -17,7 +17,11 @@ export class UpdateService {
     }
 
     public checkForUpdates(): void {
-        this.swUpdate.available.subscribe((event) => this.promptUser());
+        this.swUpdate.versionUpdates.subscribe(versionUpdate => {
+            if (versionUpdate.type === 'VERSION_READY') {
+                this.promptUser();
+            }
+        })
     }
 
     private promptUser(): void {

src/app/shared/service/auth.service.ts

@@ -1,4 +1,4 @@
-import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {first, map, Observable, of, Subject,} from 'rxjs';
 import {catchError} from 'rxjs/operators';
@@ -16,8 +16,6 @@ export class AuthService {
 
     readonly BACKEND_PATH = environment.backendPath;
 
-    readonly BACKEND_OAUTH_PATH = environment.backendOAuthPath;
-
     constructor(private http: HttpClient) {}
     login(userAuthAtempt: User): void {
         this.validateUser(this.loginUser(userAuthAtempt));
@@ -25,14 +23,14 @@ export class AuthService {
 
     googleLogin() {
         window.open(
-            this.BACKEND_OAUTH_PATH + '/oauth2/authorization/google',
+            this.BACKEND_PATH + '/oauth2/authorization/google',
             '_self',
         );
     }
 
     githubLogin() {
         window.open(
-            this.BACKEND_OAUTH_PATH + '/oauth2/authorization/github',
+            this.BACKEND_PATH + '/oauth2/authorization/github',
             '_self',
         );
     }
@@ -112,7 +110,7 @@ export class AuthService {
         });
 
         return this.http
-            .get<User>(this.BACKEND_OAUTH_PATH + '/login/oauth2/code/google', {
+            .get<User>(this.BACKEND_PATH + '/login/oauth2/code/google', {
                 withCredentials: true,
                 params: params,
             })
@@ -125,7 +123,7 @@ export class AuthService {
         });
 
         return this.http
-            .get<User>(this.BACKEND_OAUTH_PATH + '/login/oauth2/code/github', {
+            .get<User>(this.BACKEND_PATH + '/login/oauth2/code/github', {
                 withCredentials: true,
                 params: params,
             })

src/app/shared/service/github.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Language, Project} from "../model/project/project.model";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import {map, Observable, switchMap, tap} from 'rxjs';
 import {environment} from 'src/environments/environment';
 

src/app/shared/shared.module.ts

@@ -3,24 +3,18 @@ import {CommonModule} from '@angular/common';
 import {ClickedOutsideDirective} from './directive/clicked-outside/clicked-outside.directive';
 import {SliderItemComponent} from './components/slider-item/slider-item.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {HttpClientModule} from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {PopupComponent} from './components/popup/popup.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {CookieConsentModule} from './cookie-consent/cookie-consent.module';
 
-@NgModule({
+@NgModule({ declarations: [
-    declarations: [
         ClickedOutsideDirective,
         SliderItemComponent,
         PopupComponent,
     ],
-    imports: [
+    exports: [ClickedOutsideDirective, SliderItemComponent, PopupComponent], imports: [CommonModule,
-        CommonModule,
-        HttpClientModule,
         BrowserAnimationsModule,
         FontAwesomeModule,
-        CookieConsentModule,
+        CookieConsentModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
-    ],
-    exports: [ClickedOutsideDirective, SliderItemComponent, PopupComponent],
-})
 export class SharedModule {}

src/environments/environment.prod.ts

@@ -1,6 +1,5 @@
 export const environment = {
     production: true,
     backendPath: (<any>window)['env']['BACKEND_URL'],
-    backendOAuthPath: (<any>window)['env']['BACKEND_OAUTH_URL'],
     githubUser: (<any>window)['env']['GITHUB_USER'],
 };

src/environments/environment.ts

@@ -5,7 +5,6 @@
 export const environment = {
     production: false,
     backendPath: 'http://localhost:8070',
-    backendOAuthPath: 'http://localhost:8070',
     githubUser: 'HideyoshiNakazone',
 };
 

tsconfig.json

@@ -5,6 +5,7 @@
       "baseUrl": "./",
       "outDir": "./dist/out-tsc",
       "forceConsistentCasingInFileNames": true,
+      "esModuleInterop": true,
       "strict": true,
       "noImplicitOverride": true,
       "noPropertyAccessFromIndexSignature": true,
@@ -12,13 +13,15 @@
       "noFallthroughCasesInSwitch": true,
       "sourceMap": true,
       "declaration": false,
-        "downlevelIteration": true,
       "experimentalDecorators": true,
-        "moduleResolution": "node",
+      "moduleResolution": "bundler",
       "importHelpers": true,
       "target": "ES2022",
       "module": "es2020",
-        "lib": ["es2020", "dom"],
+      "lib": [
+        "es2020",
+        "dom"
+      ],
       "useDefineForClassFields": false
     },
     "angularCompilerOptions": {