この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。
次記事：Angularでビュー（チャット画面）を作る
関連：Angular2の環境構築（yoemanで構築）
この記事で行うこと
「Angular Cli」とは
Angularの環境構築に「Angular CLI」は欠かせません。
他のJavaScriptフレームワークと比較して、あえてAngularを選択するという場合、次のような理由が考えられます。
- デザイナーとの協業がしやすい。
- 公式ドキュメントが豊富なため、困ったら公式を頼ることができる。
- コンポーネント、サービス、ルーティング、モジュール、パイプ、http通信など、アプリ構築に必要な機能が揃っており、第三者が作ったライブラリを使わなくともよい。
- 命名規則やディレクトリ構成などがあらかじめ定められており、プロジェクトごとにドキュメントを用意する必要がない。コードの保守性が高くなる。
- 環境構築に時間をかける必要がなく、すぐにコードライティングに入れる。
このうちの4と5を担保してくれるのが、「Angular CLI」です。
このライブラリを使えば、コマンド１つで環境構築することができ、必要なライブラリのインストール、プロジェクトの基本ディレクトリ構成、webpackをベースにしたビルドやテストなどの基本設定もすべて行ってくれます。
（追記：2020/6）現時点（2020年6月）での最新の内容に書き換えています。
実装手順
Angular CLIをインストール
npm install -g @angular/cli
// ハンズオンを進める場合はバージョンを合わせるため、
// npm install -g @angular/cli@9.1.8
// でインストールしてください。
2020/6追記
GoogleのAngularチームと使用状況データを共有するか確認されるようになりました。問題なければyを入力してください。
? 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するだけではライブラリが更新されないので、一度アンインストールしてからインストールし直す必要があります。
// グローバル環境のアップデート
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
// ローカル環境のアップデート
rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm install
プロジェクトを作成
ng newコマンドを実行します。
（npm installも自動で実行されます。）
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/にアクセスして動作の確認を行います。
cd MyApp
ng serve
↓この画面が表示されれば、準備完了
ngコマンド（angular−cliのショートカットコマンド）
よく使いそうなものを抜粋します。
残りのコマンドは公式のドキュメントを参照してください。
実行関連
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~]
環境構築関連
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などの依存関係を追加したり、プロジェクトの最適化といった処理を行ってくれるので、そのライブラリをすぐに使用出来るようになります。
プロジェクトの構成
├── .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
ソースコード
この時点でのソースコード