Upgrade Angular from v9 to v11

[devin-ai-integration]

Upgrade Angular from v9 to v11

Summary

This PR upgrades the project from Angular 9.0.1 to Angular 11.2.14 and aligns the toolchain and runtime dependencies accordingly. It also fixes deprecated RxJS import paths and removes a deprecated Angular CLI configuration.

Key changes:

• Framework and tooling
  • Bump all @angular/* to 11.2.14 and @angular/cli to 11.2.19
  • Update @angular-devkit/build-angular to 0.1102.19
  • Update TypeScript to ~4.0.8 (required by Angular 11)
  • Update RxJS to ~6.6.7 and zone.js to ~0.11.4
  • Update tslib to ^2.0.0
• Code updates
  • Replace deprecated RxJS deep imports with top-level imports:
    • src/app/shared/services/hackernews-api.service.ts: Observable from 'rxjs'
    • src/app/item-details/item-details.component.ts: Subscription from 'rxjs'
    • src/app/user/user.component.ts: Subscription from 'rxjs'
  • Remove rxjs-compat (no longer needed)
• Config updates
  • Remove deprecated extractCss option from angular.json (CSS extraction is default in v11)

Files changed (high-level):

• package.json, yarn.lock
• angular.json
• src/app/shared/services/hackernews-api.service.ts
• src/app/item-details/item-details.component.ts
• src/app/user/user.component.ts

Build/runtime verification performed locally:

• Production build succeeded (differential loading ES2015/ES5) using:
  • export NODE_OPTIONS=--openssl-legacy-provider && yarn build
• Dev server runs successfully:
  • export NODE_OPTIONS=--openssl-legacy-provider && yarn start
• Manual runtime checks:
  • Feed pages render, navigation works (news → newest)
  • Lazy routes load correctly (item details and user modules)
  • Browser console clean (only expected 404 for non-existent test user)

Screenshots:

• Main feed:
• Newest feed:
• Item details (lazy):
• User (lazy):

Link to Devin run: https://app.devin.ai/sessions/6915cf092ccf400f9e376ac4cccedd5e
Requested by: Bobby Nobakht (@bnob-ship-it)

Review & Testing Checklist for Human

Risk level: red (framework/toolchain upgrade). 5 items to verify.

• Environment/build sanity:
  • Using Node >=17? Ensure builds run with: export NODE_OPTIONS=--openssl-legacy-provider
  • Confirm yarn build completes without errors on your machine/CI.
• Runtime smoke test:
  • yarn start, load http://localhost:4200
  • Navigate across feeds (news/newest/show/ask/jobs)
  • Open a story → verify item details lazy module loads
  • Click a username → verify user lazy module loads
  • Watch browser console for Angular/RxJS errors
• RxJS imports:
  • Confirm no remaining deep imports (rxjs/Observable, rxjs/Subscription, etc.). A quick grep should show only "from 'rxjs'" or "from 'rxjs/operators'".
• Config changes:
  • angular.json no longer uses extractCss; confirm CSS extraction still works in prod build.
• Dependency alignment:
  • All @angular/* match 11.2.14 with CLI 11.2.19, TypeScript ~4.0.8, rxjs ~6.6.7, zone.js ~0.11.4, tslib ^2.0.0. No mixed major versions.

Suggested test plan:

1. Clean install and build:
   • rm -rf node_modules && yarn install
   • export NODE_OPTIONS=--openssl-legacy-provider && yarn build
2. Local run:
   • export NODE_OPTIONS=--openssl-legacy-provider && yarn start
   • Exercise routing + lazy modules as above; check console for errors
3. Service worker (optional):
   • Serve dist/ over HTTP (e.g., npx http-server dist/angular-hnpwa) and confirm SW registers in Application tab

Notes

• CI: No checks ran on this fork; please verify on your CI runner if desired. If using Node >=17, set NODE_OPTIONS=--openssl-legacy-provider in the job environment to avoid OpenSSL errors with webpack 4.
• Lint: TSLint/codelyzer report pre-existing style issues unrelated to this upgrade. Migrating to ESLint is recommended in a follow-up PR.
• Peer dependency warnings (e.g., codelyzer vs Angular 11) are expected; they don’t affect build/runtime for this upgrade.

[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 and CI monitoring