feat: update angular to v18

Signed-off-by: Mohamed Elkholy <[email protected]>

.browserslistrc

@@ -8,10 +8,10 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-last 2 Chrome version
-last 2 Firefox version
+last 2 Chrome versions
+last 2 Firefox versions
 last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11
+not IE 11

.github/workflows/main.yml

@@ -7,47 +7,65 @@ on:
     branches: [ master ]
 
 jobs:
+  Setup:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Bundled Node Version
+        run: |
+          echo "Node version: $(which node):$(node -v)"
+          echo "NPM version: $(which npm):$(npm -v)"
+      - uses: volta-cli/action@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Install PNPM
+        run: volta install pnpm
+      - name: Project Node Version
+        run: |
+          echo "Node version: $(which node):$(node -v)"
+          echo "NPM version: $(which npm):$(npm -v)"
+          echo "PNPM version: $(which pnpm):$(pnpm -v)"
+
   Build:
+    needs: [Setup]
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: volta-cli/action@v4
         with:
-          node-version: 12
-      - uses: actions/cache@v2
+          token: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/cache@v4
         with:
           path: ~/.pnpm-store
           key: pnpm-install-v3-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             pnpm-install-v3-
-      - uses: pnpm/[email protected]
-        with:
-          version: 6
-          run_install: true
-      # The initial build after pnpm install fails for some reason so for now we will build twice
+      - name: Install PNPM
+        run: volta install pnpm
+      - name: Install Dependencies
+        run: pnpm install
+      - name: Lint
+        run: pnpm lint
       - name: Build
-        run: |
-          pnpm build:debug
-          pnpm build
-          pnpm postbuild
+        run: pnpm build
       - if: github.event_name == 'push'
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: build-art
           path: dist
   Deploy:
+    needs: [Build]
     if: github.event_name == 'push'
-    needs: Build
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           repository: awesomehub/awesomehub.github.io
           token: ${{ secrets.PAT }}
           path: deploy
       - run: rm -r deploy/dist/*
-      - uses: actions/download-artifact@v2
+      - uses: actions/download-artifact@v4
         id: download
         with:
           name: build-art

.gitignore

@@ -1,46 +1,43 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
-/src/assets/data/
+/src/assets/data
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
-
-# profiling files
-chrome-profiler-events*.json
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 
-# misc
-/.sass-cache
+# Miscellaneous
+/.angular/cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
-Thumbs.
+Thumbs.db

angular.json

@@ -3,7 +3,10 @@
   "version": 1,
   "cli": {
     "packageManager": "pnpm",
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics",
+      "@ngrx/schematics"
+    ]
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -28,6 +31,12 @@
         },
         "@schematics/angular:service": {
           "skipTests": true
+        },
+        "@angular-eslint/schematics:application": {
+          "setParserOptionsProject": true
+        },
+        "@angular-eslint/schematics:library": {
+          "setParserOptionsProject": true
         }
       },
       "root": "",
@@ -101,18 +110,18 @@
           },
           "configurations": {
             "production": {
-              "browserTarget": "awesomehub:build:production"
+              "buildTarget": "awesomehub:build:production"
             },
             "development": {
-              "browserTarget": "awesomehub:build:development"
+              "buildTarget": "awesomehub:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "awesomehub:build"
+            "buildTarget": "awesomehub:build"
           }
         },
         "lint": {
@@ -127,6 +136,5 @@
         }
       }
     }
-  },
-  "defaultProject": "awesomehub"
+  }
 }

eslint.config.js

@@ -0,0 +1,47 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+const ngrx = require("@ngrx/eslint-plugin/v9");
+
+// @todo uncomment the recommended configs
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      // eslint.configs.recommended,
+      // ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+      ...ngrx.configs.all,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "ah",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "ah",
+          style: "kebab-case",
+        },
+      ],
+      "@ngrx/use-consistent-global-store-name": ["warn", "store$"]
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      // ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);