chore(angular): bump Angular packages to v20 (step 1)

.github/workflows/smoke_test.yml

@@ -13,26 +13,26 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
 
-    - name: Build Docker image
-      run: docker build -t phoenix-app .
+      - name: Build Docker image
+        run: docker build -t phoenix-app .
 
-    - name: Run Docker container
-      run: |
-        docker run -d --name phoenix-container -p 3000:80 phoenix-app
-        sleep 10  # Give some time for the container to start
+      - name: Run Docker container
+        run: |
+          docker run -d --name phoenix-container -p 3000:80 phoenix-app
+          sleep 10  # Give some time for the container to start
 
-    - name: Smoke test
-      run: |
-        # Example smoke test using curl
-        curl --fail http://localhost:3000/ || (docker logs phoenix-container && exit 1)
+      - name: Smoke test
+        run: |
+          # Example smoke test using curl
+          curl --fail http://localhost:3000/ || (docker logs phoenix-container && exit 1)
 
-    - name: Cleanup
-      run: |
-        docker stop phoenix-container
-        docker rm phoenix-container
+      - name: Cleanup
+        run: |
+          docker stop phoenix-container
+          docker rm phoenix-container

.yarnrc.yml

@@ -2,14 +2,14 @@ nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+    spec: '@yarnpkg/plugin-interactive-tools'
 
 yarnPath: .yarn/releases/yarn-3.3.1.cjs
 
 checksumBehavior: update
 
 packageExtensions:
-  "jsroot@*":
+  'jsroot@*':
     dependencies:
-      jspdf: "*"
-      svg2pdf.js: "*"
+      jspdf: '*'
+      svg2pdf.js: '*'

ANGULAR_20_UPGRADE.md

@@ -0,0 +1,14 @@
+# Angular 20 Upgrade (Clean Restart)
+
+This PR tracks a clean restart of the Angular 20 upgrade.
+
+## Initial state
+
+- No functional changes yet
+- This PR exists to track progress and discussion
+
+## Plan
+
+- Incrementally upgrade Angular dependencies
+- Fix CI issues as they arise
+- Keep commits small and reviewable

CONTRIBUTING.md

@@ -1,88 +1,92 @@
-# Contributing
-
-## 1. Issue tracking
-
-The best way to start contributing is to explore the GitHub issue tracker for the repository.
-
-If you have already tried the application feel free to open an issue if you notice any bug or feature that could be improved.
-
-Include a brief description and context of the issue, and optionally choose labels to mark the issue as `bug`, `enhancement`, `question`...
-to give extra information to other developers.
-
-## 2. Coding
-
-Once you are decided to start contributing on the repository, take a look at the [Developer guide](./guides/developers#readme) to get a more detailed understanding.
-
-### Code formatting
-
-We use [ESLint](http://github.com/eslint/eslint) for linting of TypeScript code and [Prettier](http://github.com/prettier/prettier) for linting of all other files. You can set up ESLint with your editor following [these instructions](https://eslint.org/docs/user-guide/integrations). We also have scripts to check and update code.
-
-To check:
-
-```sh
-yarn lint
-```
-
-To update:
-
-```sh
-yarn lint:fix
-```
-
-If you're using Visual Studio Code, you can also add the [prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and then choose 'Format Document' with this linting tool.
-
-### Running linters against staged git files
-We use [lint-staged](https://github.com/okonet/lint-staged) to make sure we are not committing the usually unwanted linting error on the CI and it helps us to focus on the actual problem if we see a failed CI output. It runs our linters everytime we do a `git commit` and automatically fixes any linting errors it sees inside the project. 
-
-### CI tests
-We make use of continuous integration (CI) tests for each code change. You can (and should!) run this locally on PRs:
-```sh
-yarn test:ci
-```
-Please see the [relevant part](./guides/developers/test-setup.md) of the [Developer guide](./guides/developers#readme) for more information e.g. how to fix common problems.
-
-## 3. Commit messages
-
-For commit messages, we follow a tweaked version of [angular commit convention](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
-
-Namely, every message should consist of:
-
-```
-<header>
-<body>
-```
-
-The `header` is mandatory and must conform to the `Commit Message Header` format (see below).
-
-The `body` is encouraged, and should describe in more detail what is being changed.
-
-### Commit message header
-
-```
-<type>(<scope>): <short summary>
-  │       │             │
-  │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
-  │       │
-  │       └─⫸ Commit Scope: app | event-display
-  │
-  └─⫸ Commit Type: feat | fix | docs | style | build | misc | test
-```
-
-Here is an example of a documentation improvement for the `phoenix-app` package:
-
-```
-docs(app): Added some text about commit rules
-Lets add some rules for our commit messages,
-based on the angular commit conventions.
-```
-
-## 4. Pull Requests
-
-When creating a `Pull Request` please include a short description explaining what has changed and why. If applicable, screenshots or GIF capture about the fix or improvement will really help.
-This will help others reviewing your code so you may also reference any issues that you were working on fixing.
-
-Finally choose a meaningful title so your pull request can be easily identified
-
-## Thanks!
-
-Your contribution is very appreciated, thank you!
+# Contributing
+
+## 1. Issue tracking
+
+The best way to start contributing is to explore the GitHub issue tracker for the repository.
+
+If you have already tried the application feel free to open an issue if you notice any bug or feature that could be improved.
+
+Include a brief description and context of the issue, and optionally choose labels to mark the issue as `bug`, `enhancement`, `question`...
+to give extra information to other developers.
+
+## 2. Coding
+
+Once you are decided to start contributing on the repository, take a look at the [Developer guide](./guides/developers#readme) to get a more detailed understanding.
+
+### Code formatting
+
+We use [ESLint](http://github.com/eslint/eslint) for linting of TypeScript code and [Prettier](http://github.com/prettier/prettier) for linting of all other files. You can set up ESLint with your editor following [these instructions](https://eslint.org/docs/user-guide/integrations). We also have scripts to check and update code.
+
+To check:
+
+```sh
+yarn lint
+```
+
+To update:
+
+```sh
+yarn lint:fix
+```
+
+If you're using Visual Studio Code, you can also add the [prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and then choose 'Format Document' with this linting tool.
+
+### Running linters against staged git files
+
+We use [lint-staged](https://github.com/okonet/lint-staged) to make sure we are not committing the usually unwanted linting error on the CI and it helps us to focus on the actual problem if we see a failed CI output. It runs our linters everytime we do a `git commit` and automatically fixes any linting errors it sees inside the project.
+
+### CI tests
+
+We make use of continuous integration (CI) tests for each code change. You can (and should!) run this locally on PRs:
+
+```sh
+yarn test:ci
+```
+
+Please see the [relevant part](./guides/developers/test-setup.md) of the [Developer guide](./guides/developers#readme) for more information e.g. how to fix common problems.
+
+## 3. Commit messages
+
+For commit messages, we follow a tweaked version of [angular commit convention](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
+
+Namely, every message should consist of:
+
+```
+<header>
+<body>
+```
+
+The `header` is mandatory and must conform to the `Commit Message Header` format (see below).
+
+The `body` is encouraged, and should describe in more detail what is being changed.
+
+### Commit message header
+
+```
+<type>(<scope>): <short summary>
+  │       │             │
+  │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
+  │       │
+  │       └─⫸ Commit Scope: app | event-display
+  │
+  └─⫸ Commit Type: feat | fix | docs | style | build | misc | test
+```
+
+Here is an example of a documentation improvement for the `phoenix-app` package:
+
+```
+docs(app): Added some text about commit rules
+Lets add some rules for our commit messages,
+based on the angular commit conventions.
+```
+
+## 4. Pull Requests
+
+When creating a `Pull Request` please include a short description explaining what has changed and why. If applicable, screenshots or GIF capture about the fix or improvement will really help.
+This will help others reviewing your code so you may also reference any issues that you were working on fixing.
+
+Finally choose a meaningful title so your pull request can be easily identified
+
+## Thanks!
+
+Your contribution is very appreciated, thank you!

Dockerfile

@@ -1,16 +1,12 @@
+# --- Stage 1: Build Stage ---
 FROM nvidia/opengl:1.0-glvnd-devel-ubuntu22.04 AS build
 
-# 0. Set frontend to noninteractive to suppress warnings during install
 ARG DEBIAN_FRONTEND=noninteractive
 
-# 1. System dependencies & Python Fix
-# We combine everything into ONE Run command to keep the image small and avoid errors.
+# 1. System dependencies
 RUN apt-get update -y && \
-    # Install prerequisites for Node setup
-    apt-get install -y --no-install-recommends curl gnupg ca-certificates && \
-    # Setup Node 18 repository
+    apt-get install -y --no-install-recommends curl gnupg ca-certificates patch && \
     curl -sL https://deb.nodesource.com/setup_18.x | bash - && \
-    # Install Node, Python 3, Build Tools, and Canvas dependencies
     apt-get install -y --no-install-recommends \
     nodejs \
     build-essential \
@@ -27,36 +23,44 @@ RUN apt-get update -y && \
     libjpeg-dev \
     libgif-dev \
     librsvg2-dev && \
-    # Clean up apt lists to save space (Must be done at the very end!)
     rm -rf /var/lib/apt/lists/*
 
 # 2. Build Phoenix
 WORKDIR /phoenix
+
+# Copy FULL source ONCE (important)
 COPY . .
 
 # Enable Corepack
 RUN corepack enable
 
-# Force native modules (lmdb) to build from source
+# --- ENVIRONMENT OPTIMIZATIONS ---
 ENV npm_config_build_from_source=true
-
-# *** IMPORTANT FIX ***
-# Tell node-gyp explicitly to use the python3 executable we just installed
 ENV npm_config_python=/usr/bin/python3
-
-# CI environment variables
 ENV CI=1
 ENV CYPRESS_INSTALL_BINARY=0
 
-# Install dependencies (verbose so you can see if python errors occur)
-RUN yarn install --silent
+# 🔥 OOM FIX (critical)
+ENV NODE_OPTIONS=--max-old-space-size=4096
+ENV NG_BUILD_SOURCE_MAP=false
+ENV UV_THREADPOOL_SIZE=1
+
+# Install dependencies
+RUN yarn install
 
-# Build the web app
+# Build Angular 20 app
 RUN yarn deploy:web
 
-# Remove node_modules folders to save space
+# Remove node_modules to shrink image
 RUN find . -name "node_modules" -type d -exec rm -rf "{}" +
 
-# 3. Serve the build through NGINX
+# --- Stage 2: Production Stage ---
 FROM nginx:alpine
-COPY --from=build /phoenix/packages/phoenix-ng/docs /usr/share/nginx/html
+EXPOSE 80
+
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copy build output (docs MUST contain index.html)
+COPY --from=build /phoenix/packages/phoenix-ng/docs/ /usr/share/nginx/html/
+
+CMD ["nginx", "-g", "daemon off;"]