Modernize: upgrade Angular 9 → 17 (standalone, esbuild, RxJS 7, ESLint, GitHub Actions)

[devin-ai-integration]

Summary

End-to-end modernization of this Hacker News PWA from Angular 9.0 → 17.3, executed as a phased orchestration (core upgrade as the critical path; CI/CD, deps, RxJS, lint, standalone, and modern-syntax work folded in at their dependency milestones). Final state builds, lints, and tests green.

Result: production build 287 kB / 78 kB gzip (was ~340 kB), npm run lint 0 errors, npm test 3 passing.

What changed

• Core upgrade (9→17) via sequential ng update one major at a time (10→11→12→13→14→15→16→17). Switched the build to the Angular 17 esbuild application builder: browser builder → application, main → browser, polyfills inlined ("polyfills": ["zone.js"]), src/polyfills.ts deleted, outputPath object form, service worker wired via config path.
• Deps / prep: removed unfetch (native fetch) and unused node-fetch; @types/node 12→20; tslib→^2.6; added prettier; dropped yarn.lock (standardized on npm); added .npmrc legacy-peer-deps=true for the upgrade installs.
• RxJS 6.5 → 7.8: removed rxjs-compat, fixed deep imports (rxjs/Observable, rxjs/Subscription → rxjs). The "not ESM" CommonJS warning is gone.
• Lint: TSLint/Codelyzer → ESLint + angular-eslint. New .eslintrc.json, ng lint target, tslint.json removed. Fixed all lint errors (empty lifecycle hooks, unused vars via object-form subscribe({ next, error }), Function type, (data as any) → index access, item selector → app-item). The two template a11y rules (click-events-have-key-events, interactive-supports-focus) are set to warn rather than rewriting every interaction handler — surfaced, not blocking.
• Standalone components: ran the official @angular/core:standalone migration (convert → prune modules → bootstrap). All *.module.ts removed; main.ts now uses bootstrapApplication with provideRouter + provideServiceWorker; lazy routes use loadComponent (item/:id, user/:id). AppComponent imports HeaderComponent/FooterComponent (the schematic missed these since they came via CoreModule).
• Modern control flow: ran @angular/core:control-flow — all *ngIf/*ngFor → @if/@for; blanket CommonModule replaced with granular imports (NgStyle, CommentPipe, …).
• CI/CD: Travis → GitHub Actions (.github/workflows/ci.yml: npm ci → lint → test → prod build on Node 20).

Test setup fix (worth a look)

Removing polyfills.ts broke the Karma test context (ReferenceError: Zone is not defined). Fixed by adding "polyfills": ["zone.js", "zone.js/testing"] to the test target and dropping the manual import 'zone.js/testing' from test.ts. Added a ChromeHeadlessNoSandbox launcher for CI containers and a CommentPipe spec (the repo previously had zero specs, which made Karma exit non-zero on an empty suite).

Notes / follow-ups

• Protractor e2e is left in place (removed only the obsolete @types/jasminewd2); swapping to Playwright/Jest was listed as optional and is out of scope here.
• The intermediate Angular versions (v10–v15 toolchains) can't run under the Node version the temp CLI requires, so build/test validation was done on the final 17 state on Node 20; CI re-validates from a clean npm ci.

Link to Devin session: https://app.devin.ai/sessions/49a846b2263445d298332bb02df7ef47
Requested by: @eddiemattout-cog

---

Devin Review

Status	Commit
🟢 Reviewed	0a3f727

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[staging-devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

Debug

Playground