Skip to content

Upgrade Angular from 9.0.1 to 18.2.14 #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Upgrade Angular from 9.0.1 to 18.2.14 #93

wants to merge 10 commits into from

Conversation

@devin-ai-integration
Copy link

@devin-ai-integration devin-ai-integration bot commented Nov 2, 2025

Upgrade Angular from 9.0.1 to 18.2.14

Summary

This PR upgrades the Angular2-HN Progressive Web App from Angular 9.0.1 to Angular 18.2.14, spanning 9 major versions using the recommended incremental upgrade approach (ng update for each version: 9→10→11→12→13→14→15→16→17→18).

Key Changes:

  • Angular packages: 9.0.1 → 18.2.14
  • Angular CLI: 9.0.2 → 18.2.21
  • TypeScript: 3.7.5 → 5.4.5 (major version jump)
  • RxJS: 6.5.4 → 7.8.0 (removed rxjs-compat)
  • zone.js: 0.10.2 → 0.14.10
  • Build system: Webpack → esbuild (changed at Angular 15)
  • Output path: dist/angular-hnpwa → dist/angular-hnpwa/browser

Configuration Updates:

  • Fixed deprecated RxJS imports in 3 files (rxjs/Observable → rxjs, rxjs/Subscription → rxjs)
  • Removed deprecated angular.json options (aot, extractCss, vendorChunk, buildOptimizer)
  • Removed Protractor (deprecated e2e tool) - no replacement added
  • Removed TSLint configuration (migrated away during upgrades)
  • Updated zone.js import path

Build Status:

  • ✅ Build completes successfully (npm run build)
  • ⚠️ SASS deprecation warnings exist (invalid selectors, division operators)
  • ❌ Tests could not be verified locally (ChromeHeadless browser not available in dev environment)

Review & Testing Checklist for Human

  • CRITICAL: Verify CI tests pass completely - local test execution failed due to environment limitations
  • Run the app locally and manually test all major features:
    • Browse different feeds (news, newest, show, ask, jobs)
    • View story details and nested comments
    • View user profiles
    • Test comment collapsing/expanding
  • CRITICAL: Verify PWA functionality still works:
    • App is installable on mobile/desktop
    • Service Worker registers correctly (check DevTools → Application → Service Workers)
    • Offline mode works (disconnect network and browse cached content)
    • App manifest loads correctly
  • Check browser console for runtime errors or warnings during normal usage
  • Verify the app works across different browsers (Chrome, Firefox, Safari)
  • Review SASS deprecation warnings in build output - consider if they need to be fixed before Dart Sass 2.0.0

Notes

  • Build output location changed: The build now outputs to dist/angular-hnpwa/browser instead of dist/angular-hnpwa. If deployment scripts reference the old path, they will need to be updated.
  • No e2e tests: Protractor was removed as it's deprecated by Angular, but no modern alternative (Cypress/Playwright) was added. The app currently has zero e2e test coverage.
  • SASS warnings: Build succeeds but produces deprecation warnings about invalid CSS selectors (:host > > >) and division operators. These will become errors in Dart Sass 2.0.0.
  • Testing limitations: Could not verify tests locally due to ChromeHeadless browser not being available. CI testing is required to validate test suite.

Link to Devin run: https://app.devin.ai/sessions/a28e751b587745918f641946e7b3cb38
Requested by: @travismarceau (travis@cognition.ai)

Commits (10 total):

  1. Upgrade to Angular 10
  2. Upgrade to Angular 11
  3. Upgrade to Angular 12
  4. Upgrade to Angular 13
  5. Upgrade to Angular 14
  6. Upgrade to Angular 15 (build system switch to esbuild)
  7. Upgrade to Angular 16
  8. Upgrade to Angular 17 (TypeScript 5 upgrade)
  9. Upgrade to Angular 18
  10. Fix deprecated imports and remove Protractor

devin-ai-integration bot and others added 10 commits November 2, 2025 22:55
@devin-ai-integration @travismarceau
Upgrade to Angular 10
831cef0 
- Updated Angular packages from 9.0.1 to 10.2.5
- Updated TypeScript from 3.7.5 to 4.0.8
- Renamed browserslist to .browserslistrc
- Updated TSLint to version 6
- Updated TypeScript compiler options (module and target)
- Applied Angular migration schematics

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Upgrade to Angular 11
0fa37f3 
- Updated Angular packages from 10.2.5 to 11.2.14
- Updated TypeScript to 4.1.6
- Removed deprecated angular.json options
- Added relativeLinkResolution: 'legacy' to RouterModule
- Applied ViewEncapsulation.Native → ShadowDom migration
- Applied NavigationExtras migrations
- Applied async → waitForAsync migration

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Upgrade to Angular 12
39f5023 
- Updated Angular packages from 11.2.14 to 12.2.17
- Updated TypeScript to 4.3.5
- Updated zone.js to 0.11.8
- Removed deprecated angular.json options
- Updated zone.js syntax in polyfills.ts, test.ts, environment.ts
- Removed emitDecoratorMetadata from tsconfig.json
- Applied lazy loading and Web Worker migrations
- Replaced deprecated --prod flag in package.json
- Applied ActivatedRouteSnapshot.fragment nullable migration

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Upgrade to Angular 13
b6adbd4 
- Updated Angular packages from 12.2.17 to 13.4.0
- Updated TypeScript to 4.6.4
- Removed IE-specific polyfills from polyfills.ts
- Removed deprecated angular.json options
- Updated .gitignore to include '.angular/cache'
- Applied routerLink migration
- Updated test.ts for new teardown behavior
- Removed entryComponents (no longer necessary)

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Upgrade to Angular 14
72e32ae 
- Updated Angular packages from 13.4.0 to 14.3.0
- Updated Angular CLI to 14.2.13
- Removed 'defaultProject' from angular.json
- Replaced 'defaultCollection' with 'schematicCollections'
- Updated package version prefix from '~' to '^'
- Updated TypeScript compilation target to 'ES2020'
- Applied Routes pathMatch strict union type migration
- Applied Forms model type parameter migration

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Upgrade to Angular 15
6cbfab5 
- Updated Angular packages from 14.3.0 to 15.2.10
- Updated Angular CLI to 15.2.11
- Updated TypeScript to 4.9.5
- Removed require calls from src/test.ts
- Updated TypeScript compiler target to ES2022 and useDefineForClassFields
- Removed deprecated relativeLinkResolution from app.routes.ts
- Build system changed from Webpack to esbuild

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Upgrade to Angular 16
0c8ce80 
- Updated Angular packages from 15.2.10 to 16.2.12
- Updated Angular CLI to 16.2.16
- Updated zone.js from 0.11.8 to 0.13.3
- Guard and resolver interfaces migration (no changes)
- Removed deprecated moduleId property migration (no changes)

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Upgrade to Angular 17
971f044 
- Updated Angular packages from 16.2.12 to 17.3.12
- Updated Angular CLI to 17.3.17
- Updated TypeScript from 4.9.5 to 5.4.5 (major TypeScript 5 upgrade)
- Updated zone.js from 0.13.3 to 0.14.10 (target version)
- Replaced deprecated options in angular.json
- Applied Angular v17 new control flow syntax migration
- Applied TransferState imports migration

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Upgrade to Angular 18
ccbe82f 
- Updated Angular packages from 17.3.12 to 18.2.14
- Updated Angular CLI to 18.2.21
- Migrated to new application builder (build system)
- Updated output location to dist/angular-hnpwa/browser
- Applied Angular 18 migrations (HTTP modules, afterRender, etc)
- TypeScript and zone.js already at target versions (5.4.5, 0.14.10)

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration @travismarceau
Fix deprecated imports and remove Protractor
3682e91 
Manual fixes after Angular 18 upgrade:
- Fixed deprecated RxJS imports in hackernews-api.service.ts, item-details.component.ts, and user.component.ts
  - Changed 'rxjs/Observable' to 'rxjs'
  - Changed 'rxjs/Subscription' to 'rxjs'
- Upgraded RxJS from ~6.5.4 to ^7.8.0
- Removed rxjs-compat dependency (no longer needed)
- Removed Protractor from devDependencies (deprecated)
- Removed 'e2e' script from package.json
- Removed Protractor e2e configuration from angular.json
- zone.js import already updated by automated migrations

Co-Authored-By: travis@cognition.ai <travis@cognition.ai>
@devin-ai-integration
Copy link
Author

devin-ai-integration bot commented Nov 2, 2025

🤖 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant