JavaScript
環境構築
angular
angular-cli

Angularの環境構築(Angular CLIで構築)

この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。
次記事:Angularでビュー(チャット画面)を作る
関連:Angular2の環境構築(yoemanで構築)

この記事で行うこと

「Angular Cli」とは

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

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

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

実装手順

Angular CLIをインストール

npm install -g @angular/cli
// ハンズオンを進める場合はバージョンを合わせるため、
// npm install -g @angular/cli@6.2.1
// でインストールしてください。

すでに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の後に作成したいプロジェクト名を入れる。

Sassを使いたい場合は

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

↓この画面が表示されれば、準備完了
NgChat.png

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 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 udateについて

Angualr6から追加された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などの依存関係を追加したり、プロジェクトの最適化といった処理を行ってくれるので、そのライブラリをすぐに使用出来るようになります。

プロジェクトの構成

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

ソースコード

この時点でのソースコード