Angularに必要なツールのインストール

Angularをはじめるために必要なツールをインストールするためのチートシート｡

VisualStudio Codeのインストール

コーディング用のツールとしてよく用いられているVisualStudio Codeを今回は選択｡下記のホームページからダウンロードしてインストール｡

インストール後起動できることを確認｡

NodeJSのインストール

下記のページからダウンロードして､NodeJSのインストール｡最新版である必要がないのであれば､LTSバージョンをダウンロードしましょう｡

インストールができたら､NodeJSのコマンドnpmが使用できるかターミナル(コマンドプロンプト )で確認｡

C:\> npm version
{
  npm: '6.14.11',
  ares: '1.16.1',
  brotli: '1.0.9',
  cldr: '37.0',
  icu: '67.1',
  llhttp: '2.1.3',
  modules: '83',
  napi: '7',
  nghttp2: '1.41.0',
  node: '14.16.0',
  openssl: '1.1.1j',
  tz: '2020a',
  unicode: '13.0',
  uv: '1.40.0',
  v8: '8.4.371.19-node.18',
  zlib: '1.2.11'
}

Gitのインストール

下記のページからダウンロードしてインストール｡

同様にコマンドプロンプトなどで､インストールできたかgitコマンドを使って確認｡

C:\>git version
git version 2.31.1.windows.1

Angularのインストール

最後にAngularをインストール｡npmをコマンドを使っていくので､同様にターミナル(コマンドプロンプト)を開きます｡下記のガイドにある通り以下のコマンドでインストールできます｡

npm install -g @angular/cli

-gオプションはプロジェクトごとではなく､グローバルにパッケージをインストールするオプションです｡Angularでプロジェクト作成後は個別にパッケージをプロジェクトにインストールできますが､Angularを使ってプロジェクトを作成するため､今回はグローバルにインストールしています｡

ng version

上記コマンドを使用してAngularCLIがインストールされたか確認します｡下記のように表示されればインストールに成功です｡

C:\>ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 11.2.7
Node: 14.16.0
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1102.7 (cli-only)
@angular-devkit/core         11.2.7 (cli-only)
@angular-devkit/schematics   11.2.7 (cli-only)
@schematics/angular          11.2.7 (cli-only)
@schematics/update           0.1102.7 (cli-only)