From 27276374ab4f8af00fe5b6c8b18aca9e9f2af3da Mon Sep 17 00:00:00 2001 From: Mikhail Efanov Date: Tue, 30 Dec 2025 12:18:13 +0400 Subject: [PATCH] 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. --- .devcontainer/recommended-Dockerfile | 17 +++++------------ .devcontainer/recommended-devcontainer.json | 11 ++++++----- .gitignore | 3 +++ .../building-and-testing-angular.md | 16 ++++++++++++++++ 4 files changed, 30 insertions(+), 17 deletions(-) diff --git a/.devcontainer/recommended-Dockerfile b/.devcontainer/recommended-Dockerfile index d128851219b..0992ceb9f17 100644 --- a/.devcontainer/recommended-Dockerfile +++ b/.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"] diff --git a/.devcontainer/recommended-devcontainer.json b/.devcontainer/recommended-devcontainer.json index 03a2e3b5d79..613160862fa 100644 --- a/.devcontainer/recommended-devcontainer.json +++ b/.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"] + } + } } diff --git a/.gitignore b/.gitignore index 3a7c650d9a1..a7b08fdcd43 100644 --- a/.gitignore +++ b/.gitignore @@ -54,3 +54,6 @@ baseline.json # Ignore cache created with the Angular CLI. .angular/ + +# pnpm store +.pnpm-store diff --git a/contributing-docs/building-and-testing-angular.md b/contributing-docs/building-and-testing-angular.md index fe304b44566..2d3264e61c8 100644 --- a/contributing-docs/building-and-testing-angular.md +++ b/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: