Angularの環境構築（Angular CLIで構築）

> この記事は[Angular+Firebaseでチャットアプリを作る](http://qiita.com/Yamamoto0525/items/a76ea4b3924eeb82b0f9)のエントリーです。
> 次記事：[Angularでビュー（チャット画面）を作る](http://qiita.com/Yamamoto0525/items/94613c79ef2aa461b91e)
> 関連：[Angular2の環境構築（yoemanで構築）](http://qiita.com/Yamamoto0525/items/76d0461e38f2fec861bc)

# この記事で行うこと

- [Angular CLIをインストール](http://qiita.com/Yamamoto0525/items/65d5a0b36eb4dbd8079b#angular-cli%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [プロジェクトを作成](http://qiita.com/Yamamoto0525/items/65d5a0b36eb4dbd8079b#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90)

### 「Angular Cli」とは

Angularの環境構築に「Angular CLI」は欠かせません。
他のJavaScriptフレームワークと比較して、あえてAngularを選択するという場合、次のような理由が考えられます。

1. デザイナーとの協業がしやすい。
2. 公式ドキュメントが豊富なため、困ったら公式を頼ることができる。
3. コンポーネント、サービス、ルーティング、モジュール、パイプ、http通信など、アプリ構築に必要な機能が揃っており、第三者が作ったライブラリを使わなくともよい。
4. 命名規則やディレクトリ構成などがあらかじめ定められており、プロジェクトごとにドキュメントを用意する必要がない。コードの保守性が高くなる。
5. 環境構築に時間をかける必要がなく、すぐにコードライティングに入れる。

このうちの4と5を担保してくれるのが、「Angular CLI」です。
このライブラリを使えば、コマンド１つで環境構築することができ、必要なライブラリのインストール、プロジェクトの基本ディレクトリ構成、webpackをベースにしたビルドやテストなどの基本設定もすべて行ってくれます。

*****
（追記：2020/6）現時点（2020年6月）での最新の内容に書き換えています。
*****

# 実装手順

## Angular CLIをインストール

```bash
npm install -g @angular/cli
// ハンズオンを進める場合はバージョンを合わせるため、
// npm install -g @angular/cli@9.1.8
// でインストールしてください。
```
> 2020/6追記
GoogleのAngularチームと使用状況データを共有するか確認されるようになりました。問題なければ`y`を入力してください。

```bash
? Would you like to share anonymous usage data with the Angular Team at Google u
 nder Google’s Privacy Policy at https://policies.google.com/privacy? 
 For more details and how to change this setting, see http://angular.io/analytics.
y
```

### すでにAngular CLIのver.0.XXが入っている場合

Angularが4にアップデートすることに伴い、Angular CLIは「ver1.XX」にアップデートされ、ライブラリの表記が「angular-cli」から「@angular/cli」に変更されました。

単純に`npm update`するだけではライブラリが更新されないので、一度アンインストールしてからインストールし直す必要があります。

```bash
// グローバル環境のアップデート
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
```

```bash
// ローカル環境のアップデート
rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm install
```

## プロジェクトを作成

`ng new`コマンドを実行します。
（`npm install`も自動で実行されます。）

```bash
ng new MyApp // newの後に作成したいプロジェクト名を入れる。
? Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? (Use arrow keys) css
```
> 2020/6追記 cssの種類がデフォルトで選択できるようになりました
> ~~Sassを使いたい場合は~~
>
>~~```bash
>ng new my-app --style=sass // SASS
>ng new my-app --style=scss // SCSS
>```~~

### `ng serve`で動作確認

`ng serve`でローカルサーバを起動させ、[http://localhost:4200/](http://localhost:4200/)にアクセスして動作の確認を行います。

```bash
cd MyApp
ng serve
```

↓この画面が表示されれば、準備完了
![localhost_4200_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112566/9ce1dd52-d955-8a92-9b91-71cb08811a52.png)

### ngコマンド（angular−cliのショートカットコマンド）

よく使いそうなものを抜粋します。
残りのコマンドは[公式のドキュメント](https://angular.jp/cli)を参照してください。

#### 実行関連

```bash
ng serve // ローカル環境で実行。デフォルトでライブリロードしてくれる。
ng serve --aot // ローカル環境で実行。事前コンパイルしてくれる。
ng build --prod　// 製品版のビルド。minify＋事前コンパイルしてくれる。
ng test // 単体テスト(jasmin + karma)。
ng e2e // e2eテスト（jasmin + protractor）。
ng lint // Typescriptのtslintを実行。記法、エラーのチェック。
ng help // ヘルプを表示。
ng version // バージョンを表示。
ng update // package.jsonのアップデートを勧めてくれる。[ver6~]
ng add // angular機能の追加、更新。[ver6~]

```
#### 環境構築関連

```bash
ng generate component my-new-component // コンポーネントの作成。基本となる部品。
ng g component my-new-component // エイリアス。この表記でもよい。
ng g module my-module　// モジュールの作成。コンポーネントやサービスなどの部品をまとめる。
ng g pipe my-new-pipe // パイプの作成。AngularJSで言うfilter。文字列変換。
ng g service my-new-service // サービスの作成。ロジックにかかる部品。
ng g class my-new-class // クラスの作成。TypeScriptのクラス。
ng g guard my-new-guard // ガードの作成。認証機能には必須。
ng g library my-new-library // 自作ライブラリの作成。[ver6~]
```

#### ng updateについて

Angular6から追加された`ng update`コマンドですが、これはnpmやyarnなどによる依存関係のアップデートに加えて、プロジェクトのために必要な変換を行います。

例えば、`ng update @angular/core`コマンドは、RxJSやTypeScriptだけでなくAngularフレームワークのすべてをアップデートし、最新の状態に保つためこれらのパッケージで使用可能な最適化を実行します。このコマンドを実行すると、RxJS v6の導入をよりスムーズにしてくれるrxjs-compatを自動的にインストールしたりしてくれます。

#### ng addについて

`ng add`は、初期状態では実装されていないangularの`@angular/pwa`や`@angular/material`といったライブラリをプロジェクトの追加してくれるコマンドです。

追加と同時にインストール用のスクリプトが実行され、polyfillなどの依存関係を追加したり、プロジェクトの最適化といった処理を行ってくれるので、そのライブラリをすぐに使用出来るようになります。

### プロジェクトの構成

```bash
├── .editorconfig.json
├── .gitignore
├── angular.json
├── browserslist
├── karma.conf.js
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
├── tslint.json
├── e2e
├── node_modules
└── src
    ├── app
    │    ├── app.component.css
    │    ├── app.component.html
    │    ├── app.component.spec.ts
    │    ├── app.component.ts
    │    ├── app.module.ts
    │    └── app-routing.module.ts
    ├── assets
    ├── environments
    │    ├── environment.prod.ts
    │    └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    └── test.ts

```


### ソースコード

この時点での[ソースコード](https://github.com/Yamamoto0525/NgChat/commit/e0d07aa8bb19cc804998a8760a381798d0e74cb3)