首先

我在 StackBlitz 在线开发环境中运行了到 Angular 理解② 的代码，按照 Angular 公式文档进行操作。在这篇文章中，我将在本地设置教程运行环境。我根据之前写的 Docker 开发环境搭建（WSL2 + VSCode）的指导，在 Docker 环境中进行搭建。我参考了本地环境和工作区的设置。

Docker 环境

首先，在WSL2的Ubuntu 20.04中创建一个任意目录（这里命名为angular-tutorial）。进入创建的目录，使用code .命令打开VSCode，在左下角选择绿色的[>< WSL: Ubuntu-20.04]，然后选择[Add Development Container Configuration Files…]，再选择[Node.js & TypeScript]，选择Node.js的版本，这样会创建一个名为.devcontainer的目录。
在.devcontainer目录内有两个文件，分别是devcontainer.json和Dockerfile。在devcontainer.json文件中可以添加喜欢的VSCode扩展功能，在Dockerfile中添加RUN npm install -g @angular/cli命令。详细操作如下所示。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.187.0/containers/typescript-node
{
    "name": "Node.js & TypeScript",
    "build": {
        "dockerfile": "Dockerfile",
        // Update 'VARIANT' to pick a Node version: 12, 14, 16
        "args": { 
            "VARIANT": "12"
        }
    },

    // Set *default* container specific settings.json values on container create.
    "settings": {
        "editor.formatOnSave": true,
        "editor.tabSize": 2,
        "editor.wordWrap": "on",
    },


    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
        "danwahlin.angular2-snippets",
        "alexiv.vscode-angular2-files",
        "sanderledegen.angular-follow-selector",
        "angular.ng-template",
        "akamud.vscode-theme-onelight",
        "formulahendry.auto-close-tag",
        "formulahendry.auto-rename-tag",
        "pranaygp.vscode-css-peek",
        "msjsdiag.debugger-for-chrome",
        "abusaidm.html-snippets",
        "ionutvmi.path-autocomplete",
        "christian-kohler.path-intellisense",
        "esbenp.prettier-vscode",
        "ms-vscode.vscode-typescript-tslint-plugin",

        "mrmlnc.vscode-duplicate",
        "eamodio.gitlens",
        "xabikos.javascriptsnippets",
        "shardulm94.trailing-spaces",
        "visualstudioexptteam.vscodeintellicode",
    ],

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "yarn install",

    // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
    "remoteUser": "node"
}

ARG VARIANT="16-buster"
FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}

RUN npm install -g @angular/cli

在这种状态下，选择左下角的绿色 [>< WSL: Ubuntu-20.04] → [在容器中重新打开]，即可在VSCode上构建Docker环境并进行代码编辑。

Angular CLI (Angular Command Line Interface)
Angular 命令行界面工具 (Angular CLI)

使用Angular CLI可以执行各种进行中的开发任务，包括项目创建、应用程序和库代码生成、测试和打包、部署等。Angular CLI已经在构建上述Dockerfile时安装了，所以只需要从示例项目中复制代码即可。请点击图中的云图标[Download Project]以zip格式下载代码。

将 zip 文件移动到 angular-tutorial 目录下并解压。执行 npm install 安装依赖。最后使用 ng serve –open 命令验证应用程序的执行，但出现以下错误。

$ ng serve --open
This version of CLI is only compatible with Angular versions 0.0.0 || ^11.0.0-beta || >=11.0.0 <12.0.0,
but Angular version 12.0.5 was found instead.

Please visit the link below to find instructions on how to update Angular.
https://update.angular.io/

根据错误提示，访问https://update.angular.io/ 并执行以下命令以更新Angular-CLI等工具。

$ ng update @angular/core@12 @angular/cli@12
$ ng update

当再次执行 `ng serve –open` 命令时，系统能够顺利启动。这样就在本地成功建立了教程的执行环境。

最后

我已在本地设置了Angular的执行环境。接下来，我将继续按照官方文档，在本地环境下学习理解Angular。