Migrate EOL Angular 9 stack to Angular 20 LTS toolchain

.gitignore

@@ -4,6 +4,13 @@
 /dist
 /tmp
 /out-tsc
+# Angular build cache
+/.angular/cache
+
+# e2e
+/test-results
+/playwright-report
+/playwright/.cache
 # Only exists if Bazel was run
 /bazel-out
 

.nvmrc

@@ -0,0 +1 @@
+20

README.md

@@ -14,7 +14,6 @@
 
 <p align="center">
   <a href="/CONTRIBUTING.md"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
-  <a href="https://travis-ci.org/housseindjirdeh/angular2-hn"><img alt="Build Status" src="https://travis-ci.org/housseindjirdeh/angular2-hn.svg?branch=master"></a>
 </p>
 
 ---
@@ -73,16 +72,19 @@ Feel free to send me feedback on [twitter](https://twitter.com/hdjirdeh) or [fil
 
 ## Build process
 
-Note: This project has been ejected (with AOT + production settings) in order to customize Webpack configurations.
+This project is built with [Angular](https://angular.dev) and the Angular CLI. It requires an active Node.js LTS release (Node 20+).
 
  - Clone or download the repo
  - `npm install`
- - `npm start` to run the application with webpack-dev-server or `npm build` to kick off a fresh build and update the output directory (`dist/`)
+ - `npm start` to run the application with the dev server, or `npm run build` to kick off a fresh production build and update the output directory (`dist/`)
 
-Note: Any Service Worker changes will not be reflected when you run the application locally in development. To test service worker changes:
- - `npm build`
- - `npm run precache` to generate the service worker file
- - `npm run static-serve` to load the application along with the service worker asset using [live-server](https://github.com/tapio/live-server)
+The production build (`npm run build`) compiles ahead-of-time and generates the Angular service worker (`ngsw-worker.js`), so offline/PWA behavior can be verified by serving the contents of `dist/angular-hnpwa/browser`.
+
+## Quality checks
+
+ - `npm run lint` &mdash; lint the project with [ESLint](https://eslint.org) (via [angular-eslint](https://github.com/angular-eslint/angular-eslint))
+ - `npm test` &mdash; run unit tests with Karma + Jasmine
+ - `npm run e2e` &mdash; run end-to-end tests with [Playwright](https://playwright.dev)
 
 ## Contributors
 

angular.json

@@ -1,6 +1,9 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
   "newProjectRoot": "projects",
   "projects": {
     "angular-hnpwa": {
@@ -15,19 +18,20 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "aot": true,
             "outputPath": "dist/angular-hnpwa",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/manifest.json",
-              "src/manifest.webmanifest"
+              "src/manifest.json"
             ],
             "styles": [
               "src/styles.scss"
@@ -42,15 +46,8 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
               "outputHashing": "all",
-              "sourceMap": true,
-              "extractCss": true,
-              "namedChunks": true,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
+              "serviceWorker": "ngsw-config.json",
               "budgets": [
                 {
                   "type": "initial",
@@ -61,40 +58,51 @@
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb"
                 }
-              ],
-              "serviceWorker": true,
-              "ngswConfigPath": "ngsw-config.json"
+              ]
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
-            "browserTarget": "angular-hnpwa:build"
+            "buildTarget": "angular-hnpwa:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-hnpwa:build:production"
+              "buildTarget": "angular-hnpwa:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-hnpwa:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "browserTarget": "angular-hnpwa:build"
+            "buildTarget": "angular-hnpwa:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/manifest.webmanifest"
+              "src/manifest.json"
             ],
             "styles": [
               "src/styles.scss"
@@ -103,32 +111,15 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
             ]
           }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-hnpwa:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular-hnpwa:serve:production"
-            }
-          }
         }
       }
     }
-  },
-  "defaultProject": "angular-hnpwa"
+  }
 }

e2e/app.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('angular-hnpwa App', () => {
+  test('should load the app shell with the header navigation', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page.locator('app-root')).toBeVisible();
+    await expect(page.locator('app-header')).toBeVisible();
+
+    await expect(page.getByRole('link', { name: 'ask' })).toBeVisible();
+  });
+});

eslint.config.js

@@ -0,0 +1,56 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const { defineConfig } = require("eslint/config");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = defineConfig([
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      tseslint.configs.recommended,
+      tseslint.configs.stylistic,
+      angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+      // This project intentionally keeps the classic NgModule + constructor
+      // injection architecture, so opt out of the standalone/inject migrations.
+      "@angular-eslint/prefer-standalone": "off",
+      "@angular-eslint/prefer-inject": "off",
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      angular.configs.templateRecommended,
+      angular.configs.templateAccessibility,
+    ],
+    rules: {
+      // Templates still use the classic structural directives (*ngIf/*ngFor).
+      "@angular-eslint/template/prefer-control-flow": "off",
+      // The existing UI relies on click handlers on non-interactive elements;
+      // keyboard-accessibility hardening is tracked separately, out of scope
+      // for this dependency migration.
+      "@angular-eslint/template/click-events-have-key-events": "off",
+      "@angular-eslint/template/interactive-supports-focus": "off",
+    },
+  },
+]);