Skip to content

Migrate from Angular 9 to React (Vite + TypeScript)#303

Closed
vibhaseshadri-cognition wants to merge 1 commit into
masterfrom
devin-06.08.2026-vibha/migrate-angular-to-react
Closed

Migrate from Angular 9 to React (Vite + TypeScript)#303
vibhaseshadri-cognition wants to merge 1 commit into
masterfrom
devin-06.08.2026-vibha/migrate-angular-to-react

Conversation

@vibhaseshadri-cognition

@vibhaseshadri-cognition vibhaseshadri-cognition commented Jun 8, 2026

Copy link
Copy Markdown

Summary

Full migration from Angular 9 to React 19 + Vite 6 + TypeScript 5.7 with complete feature parity.

Architecture changes

Concern Angular (before) React (after)
Framework Angular 9 + Zone.js React 19 + Vite 6
Data fetching RxJS Observable + custom lazyFetch wrapper @tanstack/react-query + plain fetch/async-await
State management SettingsService (singleton @Injectable) SettingsContext + useSettings() hook
Routing @angular/router with lazy-loaded modules react-router-dom v6 with React.lazy() + Suspense
HTML sanitization Angular DomSanitizer / raw [innerHTML] DOMPurify.sanitize() + dangerouslySetInnerHTML
PWA / Service Worker @angular/service-worker + ngsw-config.json vite-plugin-pwa (Workbox) with precache + runtime API cache
Styling Component-scoped SCSS (styleUrls) Global SCSS with same theme mixin engine (_themes.scss)
CI/CD Travis CI → Firebase deploy GitHub Actions → npm ci && lint && typecheck && build && test
Testing Karma/Jasmine + Protractor Vitest + React Testing Library (Playwright ready)

Key implementation details

  • Models converted from class to interface (src/models/)
  • fetchItemContent resolves poll options with Promise.all instead of nested subscribe calls
  • Theme engine: The full SCSS @mixin theme(...) with 3 themes (default/night/amoledblack) is preserved. Theme class applied at root <div className={theme}>.
  • Code splitting: ItemDetails and User pages are React.lazy() loaded, matching Angular's loadChildren lazy modules
  • Comment pipeformatCommentCount() utility function
  • Assets moved from src/assets/public/assets/ for Vite's static file serving
  • Firebase hosting.public updated from dist/angular-hnpwa to dist

Removed files

All Angular-specific: angular.json, tsconfig.app.json, tsconfig.spec.json, karma.conf.js, e2e/, tslint.json, .travis.yml, browserslist, yarn.lock, src/app/, ngsw-config.json, src/manifest.json.

Link to Devin session: https://app.devin.ai/sessions/929a472db24a46a487606391f6fd2a7f
Requested by: @vibhaseshadri-cognition


Devin Review

Status Commit
⚪ Not started

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

Open in Devin Review (Staging)

- Replace Angular 9 with Vite + React 19 + TypeScript 5.7
- Port all models as TypeScript interfaces
- Create API service with fetch + async/await (replaces RxJS observables)
- Implement SettingsContext (replaces SettingsService) with localStorage persistence
- Set up React Router v6 with same route structure
- Port all components: Header, Footer, Settings, Loader, ErrorMessage
- Port all pages: Feed, ItemDetails (with recursive Comment tree), User
- Use @tanstack/react-query for data fetching + caching
- DOMPurify for HTML sanitization (replaces Angular pipe)
- Code splitting with React.lazy for ItemDetails and User pages
- PWA support via vite-plugin-pwa (replaces ngsw)
- Full SCSS theme engine ported (default, night, amoledblack)
- ESLint 9 flat config + Prettier (same config as original)
- Vitest + React Testing Library for unit tests
- GitHub Actions CI/CD (replaces Travis CI)
- Firebase hosting config updated for Vite dist output
- Remove all Angular-specific files

Co-Authored-By: Vibha  Seshadri <vibha.seshadri@cognition.ai>
@devin-ai-integration

Copy link
Copy Markdown

🤖 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

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant