Angular公式チュートリアルのローカル環境セットアップ

# はじめに

[Angular公式ドキュメントに沿ってAngular理解②](https://qiita.com/honda28/items/0d786987bf5a70e0294d)までを StackBlitz オンライン開発環境で実行していた。本記事ではローカルでチュートリアルの実行環境をセットアップする。以前書いた [Docker 開発環境構築 (WSL2 + VSCode)](https://qiita.com/honda28/items/0aa52562f6bdf31698ae) にしたがって Docker 環境で構築することとした。[ローカル環境とワークスペースのセットアップ](https://angular.jp/guide/setup-local)を参考にした。

# 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.json` と `Dockerfile` の2つのファイルがある。`devcontainer.json` には VSCode の好きな拡張機能を、`Dockerfile` には `RUN npm install -g @angular/cli` を追加した。詳細は以下。

```json:.devcontainer/devcontainer.json
// 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"
}
```

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

RUN npm install -g @angular/cli
```

この状態で、再度左下の緑色の [>< WSL: Ubuntu-20.04] → [Reopen in Container] を選択すると、Docker 環境が構築され VSCode 上でコードを編集することができる。

# Angular CLI

Angular CLIを使用すると、プロジェクト作成、アプリケーションとライブラリコードの生成、テストやバンドル、デプロイなどのさまざまな進行中の開発タスクを実行できる。
Angular CLI は上記 Dockerfile をビルドする際にインストールされているので、あとは[サンプルプロジェクト](https://stackblitz.com/angular/bxkrlvlrjjl?file=src%2Fapp%2Fapp.component.ts)からコードをコピーする。以下画像の雲マーク [Download Project] を押して zip 形式でコードをダウンロードする。

![StackBlitz.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769545/26bc4b74-2318-2e2c-e044-e94cf185ac15.png)

zip ファイルを `angular-tutorial` ディレクトリに移動させて、解凍する。`npm install` を実行して依存関係をインストール。最後に、`ng serve --open` でアプリケーションの実行を確認するが、以下エラーが発生。

```bash
$ 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/](https://update.angular.io/) へアクセスして以下コマンドを実行して Angulra-CLI などをアップデート。

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

再度 `ng serve --open`  を実行すると、問題なく立ち上がった。これでローカルにチュートリアルの実行環境を構築できた。

# おわりに

Angular の実行環境をローカルでセットアップした。以降ローカル環境で引き続き公式ドキュメントに沿って、Angular を理解していく。