Angular CLI でよく使うコマンドをまとめてみた

どうも！大阪オフィスの西村祐二です。

サーバーレスなシステムを作ろうとなると、SPAは重要な項目になってきます。
私は
・フルスタック
・Typescriptを標準サポート
・ファイルの命名や、記述方法がある程度固定化されており個人差が発生しにくいところ
に魅力を感じてAngularを勉強しております。
(他と比べたわけではないので語弊がありましたら申し訳ありません。)
チュートリアルが一通り終り、自分で一から作っていくときに
Angular CLIを使って構築していくことになるかと思います。
今回、勉強した内容の復習もかねて、よく使いそうなコマンドをまとめていきたいと思います。

(※2017/11/25時点の内容となります。)

環境

Angular CLI: 1.5.0
Node: 8.8.1
OS: darwin x64
Angular: 5.0.2

Angular CLIをインストール

下記コマンドでcliをインストールできます。

$ npm install -g @angular/cli

アプリケーションの雛形ファイルを作成

ng newでAngularの基本的な雛形ファイル一式をコマンド一発で作成してくれます。

裏ではWebpackが動いていますので、定番のWebpack　+　Typescript　+　SCSSな環境が簡単に作れて便利です。
また、テストやlintの設定もまるっと含まれていますので、
本番環境へのデプロイも楽になります。

生成されたファイルの詳細は下記ブログがとても参考になります。

Angular プロジェクトを新規作成したとき 生成されるファイルの役割を説明していく

通常の雛形アプリを作成

下記コマンドでアプリケーションの雛形を作成できます。

$ ng new test-app

作成完了したらng serverで確認してみましょう。

$ cd test-app
$ ng server --open

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
.
.
.
webpack: Compiled successfully.

ブラウザからhttp://localhost:4200/　へアクセスすると下記画像が表示されます。
「--open」オプションをつけると自動的にブラウザを開いてくれます。
また、ファイルを編集すると自動的にブラウザを更新してくれます。とても便利ですね。

最小構成で雛形アプリを作成

下記コマンドで最小構成のアプリケーションを作成できます。

$ ng new test-app --minimal

e2e,karma,protractor,tslint
などテスト系のファイルが含まれない形で雛形を生成してくれます。

はじめからSCSSを使える環境で雛形を作成

下記コマンドでCSSをSCSSに変更して雛形ファイルを作成してくれます。

$ ng new test-app --style scss

他のCSSのメタ言語も指定できます。
オプションを使用したい言語に指定してください。
・less
・sass
・styl (stylus)

はじめからroutingモジュールを含めて雛形を作成

下記コマンドでrouting設定を含めた雛形を作成してくれます。

$ ng new test-app　--routing

routingはあとから設定することもできます。

アプリケーション全体を管理するapp.module.tsに
自動でroutingの設定が追記されています。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

コンポーネントを追加

以降はroutingモジュールを含めた雛形をもとに進めていきます。

下記コマンドで画面の部品のコンポーネントを作成できます。

$ ng generate component test
  create src/app/test/test.component.css (0 bytes)
  create src/app/test/test.component.html (23 bytes)
  create src/app/test/test.component.spec.ts (614 bytes)
  create src/app/test/test.component.ts (261 bytes)
  update src/app/app.module.ts (467 bytes)

コンポーネント追加に伴って、
きちんとapp.module.tsがアップデートされていることがわかります。

追加したコンポーネントを表示するには、下記22行目のように
コンポーネントのタグを追加することで表示できます。

app.component.htmlはアプリケーションの共通部分のようなページです。

app.componet.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>
<app-test></app-test>

[寄り道]ルーティングしてみる

リンクをクリックするとURLパスを「/test」に移動し、
追加したコンポーネントを表示する、みたいなことをしてみます。
app-routing.module.tsにURLパスが変更されたときに
どのコンポーネントを表示するか指定します。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TestComponent } from './test/test.component';

import { templateJitUrl } from '@angular/compiler';

const routes: Routes = [
  { path: 'test', component: TestComponent}
];
・
・
・

app.componet.htmlにリンクを作っておくことで
簡単にルーティングさせることができます。

app.componet.html

・
・
・
<nav>
  <a routerLink="/test">test</a>
</nav>

サービスを追加

下記コマンドでserviceを追加することができます。

$ ng generate service test
  create src/app/test.service.spec.ts (362 bytes)
  create src/app/test.service.ts (110 bytes)

app.module.tsへの追記はされないので注意してください。
DI(依存性注入)のために、providersに注入されるサービス名を記載しておく必要があります。
(よく忘れがち)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { TestService } from './test.service';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [ TestService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ビルド

作成したアプリケーションをS3などのホスティングサービスにおきたい場合は
下記コマンドを実行することにより、「dist」配下にファイルを出力してくれます。
それを設置することで作成したアプリケーションを配信することができます。

$ ng build

$ ls dist
favicon.ico             main.bundle.js          styles.bundle.js
index.html              main.bundle.js.map      styles.bundle.js.map
inline.bundle.js        polyfills.bundle.js     vendor.bundle.js
inline.bundle.js.map    polyfills.bundle.js.map vendor.bundle.js.map

本番環境用に最適化してビルド

容量を減らし、レスポンスの向上を少しでも図りたいときなどは
--prodをつけることにより最適化し、「dist」に出力してくれます。

$ ng build --prod

$ ls dist
3rdpartylicenses.txt
favicon.ico
index.html
inline.1cd2d55d7ea87e33f80c.bundle.js
main.f5135372abdc320bb135.bundle.js
polyfills.ad37cd45a71cb38eee76.bundle.js
styles.d41d8cd98f00b204e980.bundle.css

ファイル数が減少していることがわかりますね。

確認コマンド$ du distより容量比較してみると、かなり容量削減できていることがわかります。

webpack.config.jsを出力

裏でwebpackが動いていますが、webpack.config.jsは隠蔽されております。
下記コマンドより、webpack.config.jsを出力し、ユーザ側で設定変更可能となります。

注意点として、webpack.config.js出力後はビルドやテスト、サーバを起動する際はngコマンドではなく、npmコマンドでおこなうことになります。

$ ng eject
==========================================================================================
Ejection was successful.

To run your builds, you now need to do the following commands:
   - "npm run build" to build.
   - "npm test" to run unit tests.
   - "npm start" to serve the app using webpack-dev-server.
   - "npm run e2e" to run protractor.

Running the equivalent CLI commands will result in an error.

==========================================================================================
Some packages were added. Please run "npm install".

コマンドの実行が成功したら、webpack.config.jsがされているはずです。
また、出力結果にあるとおり、npm installをやっておきましょう。

$ npm install

また、webpack.config.js 出力後、
package.jsonのscript部分が変化していることがわかります。

$ less package.json

  .
  .
  .
  "scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --port=4200",
    "build": "webpack",
    "test": "karma start ./karma.conf.js",
    "lint": "ng lint",
    "e2e": "protractor ./protractor.conf.js",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
  },
  .
  .
  .

さいごに

いかがだったでしょうか。

Angular CLIでよく使うコマンドをまとめてみました。
Angularでできることは、まだまだたくさんあるのでこれからも紹介していきたいと思います。

誰かの参考になれば幸いです。