Configure webpack to handle both Angular and React components

[devin-ai-integration]

Configure webpack to handle both Angular and React components

Summary

Extends the Angular CLI webpack configuration using @angular-builders/custom-webpack so the project can process both Angular and React component files. Adds babel-loader rules for .jsx and .tsx files alongside the existing Angular/TypeScript pipeline.

Key changes:

• webpack.config.js (new): Custom webpack rules using babel-loader with @babel/preset-react and @babel/preset-typescript for .jsx/.tsx files
• angular.json: Swaps @angular-devkit/build-angular builders to @angular-builders/custom-webpack for build and serve targets
• tsconfig.json: Adds "jsx": "react" to compiler options
• package.json: Adds react@16, react-dom@16, Babel presets, types, and @angular-builders/custom-webpack@9

The existing Angular build passes successfully with these changes.

Review & Testing Checklist for Human

• Dual lockfiles: A package-lock.json was generated while yarn.lock already exists. Verify which package manager the team uses and consider removing the other lockfile to avoid conflicts.
• Validate with a real React component: No .jsx/.tsx React files exist yet—create a sample React component and confirm it compiles and renders correctly within the Angular app to prove the config end-to-end.
• React 16 version: react@16 and react-dom@16 were chosen for compatibility with Angular 9. Confirm this version aligns with team expectations.
• Test/lint builders unchanged: Only build and serve targets use the custom-webpack builder; test, lint, and e2e still use @angular-devkit/build-angular. Verify this is acceptable or update if React files need to be covered by those targets.
• Resolve extensions merge: The custom config adds ['.js', '.jsx', '.ts', '.tsx'] to resolve.extensions. Confirm webpack-merge correctly merges these with Angular CLI's defaults and doesn't drop anything (e.g., .scss, .css).

Suggested test plan: Create a minimal .tsx React component in src/, import it from an Angular wrapper component, run ng build and ng serve, and confirm no build errors and the component renders.

Notes

• Link to Devin run
• Requested by: @matthewguerra-cog

[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