Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,21 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json",
{
"glob": "favicon.ico",
"input": "public",
"output": "/"
},
{
"glob": "manifest.json",
"input": "public",
"output": "/"
},
{
"glob": "**/*",
"input": "public/assets",
"output": "/assets"
},
"src/manifest.webmanifest"

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔍 angular.json references non-existent src/manifest.webmanifest

The build and test asset lists still reference src/manifest.webmanifest, which does not exist in the repo and was already absent at the base commit. Pre-existing and not introduced here, but the Angular build's asset copy step will fail on it regardless.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed on both counts — it's dangling at the base commit (the real file is src/manifest.json, which this PR moved to public/ and repointed). Since the whole angular.json asset list is deleted in PR8, I'm leaving the stale entry rather than fixing an Angular config on its way out.

],
"styles": [
Expand Down Expand Up @@ -92,8 +104,16 @@
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "favicon.ico",
"input": "public",
"output": "/"
},
{
"glob": "**/*",
"input": "public/assets",
"output": "/assets"
},
"src/manifest.webmanifest"
],
"styles": [
Expand Down
12 changes: 12 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Angular 2 HN</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src-react/main.tsx"></script>
</body>
</html>
15 changes: 13 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
"e2e": "ng e2e",
"react:dev": "vite",
"react:build": "tsc -p tsconfig.react.json && vite build",
"react:preview": "vite preview"
},
"private": true,
"dependencies": {
Expand All @@ -21,6 +24,9 @@
"@angular/router": "~9.0.1",
"@angular/service-worker": "~9.0.1",
"node-fetch": "^2.6.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
"rxjs": "~6.5.4",
"rxjs-compat": "^6.5.2",
"tslib": "^1.10.0",
Expand All @@ -35,6 +41,9 @@
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
Expand All @@ -44,9 +53,11 @@
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"sass": "^1.77.8",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
"typescript": "~5.4.5",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 TypeScript bump to 5.4.5 breaks the Angular build

Raising the shared typescript devDependency to ~5.4.5 violates the range enforced by Angular 9's @angular/compiler-cli (>=3.6.4 <3.8.0). ng build, ng test, and ng lint fail with an unsupported-TypeScript error because both toolchains resolve the same typescript package.

Prompt for agents
The React scaffold requires a modern TypeScript (moduleResolution: "bundler" needs TS 5.0+), but this repo shares a single `typescript` devDependency between the untouched Angular 9 toolchain and the new React/Vite toolchain. Angular 9's @angular/compiler-cli (~9.0.1) hard-fails ngc when TypeScript is outside >=3.6.4 <3.8.0, so bumping to ~5.4.5 breaks `ng build`/`ng test`/`ng lint`, contradicting the goal of leaving Angular buildable. Consider a way to give each toolchain its own TypeScript version (e.g. isolate the React scaffold in a separate workspace/package with its own node_modules, or otherwise avoid replacing the single shared typescript version that Angular 9 depends on) until Angular is removed in PR8.
Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed on the version ranges — Angular 9's compiler-cli caps TypeScript at <3.8.0, and moduleResolution: "bundler" needs 5.0+, so one shared typescript can't satisfy both. Two things make me keep the bump rather than split the repo into workspaces:

  1. ng build on this baseline already fails on Node 20 before TypeScript is even consulted (ERR_OSSL_EVP_UNSUPPORTED, Webpack 4 vs OpenSSL 3), so the Angular build isn't actually recoverable in this environment either way.
  2. The Angular toolchain is deleted in the last PR of this stack, so a workspace split would exist for exactly seven PRs.

What "coexist" buys here is that the Angular source stays in place as the reference for each port, which it does. Called out to the requester in case they'd rather have a working ng build at every step — that would mean isolating the React scaffold in its own package with a separate node_modules.

"vite": "^5.4.8"
},
"prettier": {
"trailingComma": "es5",
Expand Down
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes.
5 changes: 5 additions & 0 deletions src-react/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
function App() {
return <h1>Angular 2 HN — React migration in progress</h1>;
}

export default App;
10 changes: 10 additions & 0 deletions src-react/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
);
16 changes: 16 additions & 0 deletions tsconfig.react.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"compilerOptions": {
"target": "ES2020",
"lib": ["DOM", "DOM.Iterable", "ES2020"],
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"noEmit": true,
"isolatedModules": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"types": ["vite/client"]
},
"include": ["src-react", "vite.config.ts"]
}
14 changes: 14 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [react()],
publicDir: 'public',
build: {
outDir: 'dist/react',
emptyOutDir: true,
},
server: {
port: 3000,
},
});
Loading