Angular v18

.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,62 @@ 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: Project Node Version
+        run: |
+          echo "Node version: $(which node):$(node -v)"
+          echo "NPM version: $(which npm):$(npm -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') }}
+          path: ~/.npm
+          key: npm-install-v3-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            pnpm-install-v3-
-      - uses: pnpm/action-setup@v2.0.1
-        with:
-          version: 6
-          run_install: true
-      # The initial build after pnpm install fails for some reason so for now we will build twice
+            npm-install-v3-
+      - name: Install Dependencies
+        run: npm ci
+      - name: Type Check
+        run: npm run typecheck
+      - name: Lint
+        run: npm run lint
       - name: Build
-        run: |
-          pnpm build:debug
-          pnpm build
-          pnpm postbuild
+        run: npm run 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

.npmrc

@@ -1 +1,2 @@
-shamefully-hoist=true
+prefer-dedupe
+legacy-peer-deps

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "semi": false,
+  "printWidth": 120
+}

README.md

@@ -8,7 +8,7 @@ This repository contains the sources for AwesomeHub Angular application.
 
 ## About
 The App was originaly built for educational purposes and to experiment with [Angular 2](https://v2.angular.io/), [NgRx](https://ngrx.io/) and [RxJS](https://www.learnrxjs.io/), but
-I have recently managed to update the codebase to [Angular 12](https://v12.angular.io/).
+I have recently managed to update the codebase to [Angular 12](https://v12.angular.io/), then to [Angular 18](https://angular.dev/).
 
 The App UI is built on top of the good old [Material Design Lite](https://getmdl.io/) library, It's much lighter than [Angular Material](https://material.angular.io/)
 but I originally used it because Angular Material was still in alpha at the time I built this app.
@@ -17,38 +17,40 @@ but I originally used it because Angular Material was still in alpha at the time
 
 ### Prerequisites
 
-- Node >= 12.14.1
-- PNPM >= 6.0
+- Node >= 18.0
+- NPM >= 10.0
 
 ```bash
 # Clone the repo
 $ git clone https://github.com/awesomehub/app.git awesomehub-app
 $ cd awesomehub-app
 
 # Install dependencies
-$ pnpm install
+$ npm install
 
 # Start dev server
-$ pnpm start
+$ npm start
 ```
 
 ## Main Commands
 
-|Command|Description|
-|---|---|
-|`pnpm start`|Start dev server @ `localhost:4200`|
-|`pnpm build`|Build production bundles to `./dist` directory|
-|`pnpm build:debug`|Build unoptimized production bundles for debugging purposes to `./dist` directory|
-|`pnpm serve`|Start web server @ `localhost:5000` to serve build artifacts from `./dist` directory|
-|`pnpm lint`|Lint TypeScript source with ESLint |
-|`pnpm ng` or `ng`|Run Angular CLI commands (eg. `ng generate module`)|
+| Command               | Description                                                                          |
+|-----------------------|--------------------------------------------------------------------------------------|
+| `npm start`           | Start dev server @ `localhost:4200`                                                  |
+| `npm run build`       | Build production bundles to `./dist` directory                                       |
+| `npm run build:debug` | Build unoptimized production bundles for debugging purposes to `./dist` directory    |
+| `npm run serve`       | Start web server @ `localhost:5000` to serve build artifacts from `./dist` directory |
+| `npm run typechek`    | Check TypeScript source code                                                         |
+| `npm run lint`        | Lint source code with ESLint                                                         |
+| `npm run format`      | Format source code with Prettier                                                     |
+| `npm run ng` or `ng`  | Run Angular CLI commands (eg. `ng generate module`)                                  |
 
 
 [ci-url]: https://github.com/awesomehub/app/actions/workflows/main.yml
 [ci-img]: https://img.shields.io/github/actions/workflow/status/awesomehub/app/main.yml?branch=master
 [netlify-url]: https://app.netlify.com/sites/awesomehub/deploys
 [netlify-img]: https://img.shields.io/netlify/968920d6-f8ff-4967-93d7-9e55861c1174?logo=netlify&logoColor=white
-[angular-url]: https://github.com/angular/angular/releases/tag/12.0.0
-[angular-img]: https://img.shields.io/badge/angular-v12-dd0131.svg?logo=angular
+[angular-url]: https://github.com/angular/angular/releases/tag/18.0.0
+[angular-img]: https://img.shields.io/badge/angular-v18-dd0131.svg?logo=angular
 [website-url]: https://awesomehub.js.org
 [website-img]: https://img.shields.io/website?logo=statuspal&url=https%3A%2F%2Fawesomehub.js.org

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "cli": {
     "packageManager": "pnpm",
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": ["@angular-eslint/schematics", "@ngrx/schematics"]
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -28,6 +28,12 @@
         },
         "@schematics/angular:service": {
           "skipTests": true
+        },
+        "@angular-eslint/schematics:application": {
+          "setParserOptionsProject": true
+        },
+        "@angular-eslint/schematics:library": {
+          "setParserOptionsProject": true
         }
       },
       "root": "",
@@ -45,14 +51,8 @@
             "tsConfig": "tsconfig.app.json",
             "aot": false,
             "sourceMap": true,
-            "assets": [
-              "src/assets/data",
-              "src/assets/images",
-              "src/manifest.json"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/assets/data", "src/assets/images", "src/manifest.json"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -101,32 +101,28 @@
           },
           "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": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ],
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
             "fix": true
           }
         }
       }
     }
-  },
-  "defaultProject": "awesomehub"
+  }
 }