build: update dev container configuration

build: update dev container configuration

build: update dev container configuration

Update dev container configuration files to support latest environment.
- Use customizations.vscode structure instead of deprecated extensions property.
- Update bazel extension to BazelBuild.vscode-bazel.
- Ignore .pnpm-store directory.
- Update ports list
- Use forwardPorts instead appPort

Document the usage of Dev Containers in building-and-testing-angular.md.

(cherry picked from commit 27276374ab)

.devcontainer/recommended-Dockerfile

@@ -1,23 +1,16 @@
 # Image metadata and config.
 # Ideally, the Node.js version should match what we use on CI.
-FROM cimg/node:18.13.0@sha256:45d0ee279f522c4562a464df71108104cc9b2187205333ffd0707d4f05589731
-
+FROM cimg/node:22.21.1-browsers@sha256:eee8ed828d5a54196456a86ac6872c43325acad54e59632261e23b486c458992
 
 LABEL name="Angular dev environment" \
-      description="This image can be used to create a dev environment for building Angular." \
-      vendor="angular" \
-      version="1.0"
-
-EXPOSE 4000 4200 4433 5000 8080 9876
+  description="This image can be used to create a dev environment for building Angular." \
+  vendor="angular" \
+  version="1.0"
 
+EXPOSE 4200 4201 4205 4206 9876
 
 # Switch to `root`.
 USER root
 
-
-# Configure `Node.js`/`npm`.
-RUN npm config --global set user root
-
-
 # Go! (And keep going.)
 CMD ["tail", "--follow", "/dev/null"]

.devcontainer/recommended-devcontainer.json

@@ -2,10 +2,11 @@
 {
   "name": "Angular dev container",
   "dockerFile": "Dockerfile",
-  "appPort": [4000, 4200, 4433, 5000, 8080, 9876],
+  "forwardPorts": [4200, 4201, 4205, 4206, 9876],
   "postCreateCommand": "pnpm install",
-  "extensions": [
-    "devondcarew.bazel-code",
-    "ms-vscode.vscode-typescript-tslint-plugin"
-  ],
+  "customizations": {
+    "vscode": {
+      "extensions": ["BazelBuild.vscode-bazel", "ms-vscode.vscode-typescript-tslint-plugin"]
+    }
+  }
 }

.gitignore

@@ -54,3 +54,6 @@ baseline.json
 
 # Ignore cache created with the Angular CLI.
 .angular/
+
+# pnpm store
+.pnpm-store

contributing-docs/building-and-testing-angular.md

@@ -5,6 +5,7 @@ It also explains the basic mechanics of using `git`, `node`, and `pnpm`.
 
 - [Building and Testing Angular](#building-and-testing-angular)
   - [Prerequisite Software](#prerequisite-software)
+  - [Development in a Container](#development-in-a-container)
   - [Getting the Sources](#getting-the-sources)
   - [Installing NPM Modules](#installing-npm-modules)
   - [Building](#building)
@@ -52,6 +53,21 @@ following on your development machine:
 - On Windows: [MSYS2](https://www.msys2.org/) which is used by Bazel. Follow
   the [instructions](https://bazel.build/install/windows#installing-compilers-and-language-runtimes)
 
+## Development in a Container
+
+You can also use the provided [Dev Container](https://containers.dev/) configuration to set up a development environment. This approach uses Docker to create a container with all the necessary tools (Node.js, pnpm, etc.) pre-installed.
+
+**Prerequisites:**
+
+- [Docker Desktop](https://www.docker.com/products/docker-desktop)
+- [VS Code](https://code.visualstudio.com/)
+- [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+
+**Usage:**
+
+1. Open the Angular repository in VS Code.
+2. Run the **Dev Containers: Reopen in Container** command from the Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P`).
+
 ## Getting the Sources
 
 Fork and clone the Angular repository: