Angular CLIで、Angularアプリをかんたん楽々構築！

Angular2

2017.04.09

この記事は最終更新日から1年以上が経過しています。

今回は、Angularを扱うなら、使うべきツール「Angular CLI」のご紹介です。

「Angular CLI」を使うことによって、様々な事が容易に行えます。

新規でアプリを制作する際は、「Angular CLI」を用いることによって、環境やアーキテクチャの基盤も容易に行えるので、必須といって良い程ですね。

Angular CLI 公式ページ

Angular CLI

「Angular CLI」は、

・アプリの作成

・コンポーネントやサービスなどの生成

・lint

・ビルド

・サーバー起動

・テスト実行

等を、コマンドラインから開発に必要な一通りのことを容易に実行することが可能なツールです。

それでは早速、Angular CLIをインストールしてAppを作成し、起動する流れを追っていきましょう。

と言っても、公式ページで書かれている4つのコマンドで、アプリ起動まで、アッという間に出来てしまいます。

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve

その他、ジェネレートコマンドでのコンポーネント生成なども追っていきます。

「こうしたいんだけど。。」と思ったシーンがあったので、

今回は、実際に利用するシーンを含めての例も載せております。

それでは、早速使っていきましょう。

Angular CLI インストール

npm install -g @angular/cli

Angular CLIを使用出来るようにglobalオプション付与し、npm installを行います。

アプリの作成

インストール完了しましたら、「アプリの作成」を行いましょう。

「アプリの作成」は「ngコマンド」の「new アプリ名」で行えます。

ng new my-dream-app

簡単ですね。

コマンドを入力すると、以下の様にアプリのひな形が、ドカーっと生成されるかと思います。

create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.

Angular1から、推奨であるテストフレームワーク karmaの生成されるので、e2eテストも簡単に始められます。

あれやこれやと、npm installを行ったり、gulpのタスクを作成したりしなくて良いので大変便利ですよね＞＜

作業を行うために、生成したアプリに移動します。

cd my-dream-app

アプリの起動

もう、アプリは起動出来る状態にあります。

ng serve

「ngコマンド」の「serve」コマンドでサーバーを起動できます。

Hash: d9ba5b265148f870d6b9                                                              
Time: 6964ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

コマンドを入力すると、webpackによるビルドが走ります。

ビルド完了後、localhost:4200 に、アクセスするとアプリを確認できます。

http://localhost:4200/

この表示すれば成功。

簡単ですね！お疲れ様でした！

オプション

「serve」コマンドはその他オプションとしてホストやポートの指定も行えます。

ng serve --host 0.0.0.0 --port 4201

–host でホスト指定、–port でポート指定となります。

generate コマンド

「Angular CLI」は、アプリの雛形を生成するだけではなく、「generate」コマンドを用いて、「Component」や「Directive」や「Service」等の生成も行えます。

Scaffold	Usage
Component	`ng g component my-new-component`
Directive	`ng g directive my-new-directive`
Pipe	`ng g pipe my-new-pipe`
Service	`ng g service my-new-service`
Class	`ng g class my-new-class`
Guard	`ng g guard my-new-guard`
Interface	`ng g interface my-new-interface`
Enum	`ng g enum my-new-enum`
Module	`ng g module my-module`

では、実際にコマンドを入力してみましょう。

「generate」コマンドで、「component」を生成してみます。

以下のコマンドを入力すると、

ng g component my-new-component

create src/app/my-new-component/my-new-component.component.css
create src/app/my-new-component/my-new-component.component.html
create src/app/my-new-component/my-new-component.component.spec.ts
create src/app/my-new-component/my-new-component.component.ts
update src/app/app.module.ts

このように、該当するコンポーネントの「component.html」「component.css」「component.ts」「component.spec.ts」

ファイルが「src/app/」以下に生成されるのと、「app.module.ts」が更新されているのがわかります。

「app.module.ts」を確認すると、MyNewComponentComponentの import文と、declarationsの配列に含まれているのが確認できます。

app.module.ts

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

ふむふむ。便利ですね！

それでは、もう一度 Componentである、my-new-component2を生成してみます。

ng g component my-new-component2

「src/app/」を確認すると、「src/app/」以下に、my-new-component と my-new-component2のフォルダが生成されており、それぞれのファイルが生成されているのが確認できます。

src/app/

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
my-new-component
my-new-component2

それでは、今度は「interface」を生成してみましょう。

ng g interface my-new-component

以下のコマンドが走り、my-new-component.tsが、「src/app/」以下に生成されます。

create src/app/my-new-component.ts

src/app/を確認すると、以下の様に。

src/app/

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
my-new-component
my-new-component.ts
my-new-component2

ふむふむ。便利ですね！

今度は「service」を生成してみます。

ng g service my-new-service

create src/app/my-new-service.service.spec.ts
create src/app/my-new-service.service.ts

「my-new-service.service.ts」と「my-new-service.service.spec.ts」が、src/app/以下に生成されました。

src/app/

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
my-new-component
my-new-component.ts
my-new-component2
my-new-service.service.spec.ts
my-new-service.service.ts

ふむふむ。便利ですね！

でもですよ。アプリがスケールする度に「src/app/」以下に生成されるとなると、ちょっと肥大化すると整理されていない気がしますよね。。。

現状は以下の様な感じですが、

front
├─ e2e
│   └─ ...
└─ src
    ├─ component-name01
    │  ├─ hoge.component.html
    │  ├─ hoge.component.css
    │  ├─ hoge.component.ts
    │  ....
    ├─ component-name02
    │  ├─ hoge.component.css
    │  ├─ hoge.component.ts
    │  ....
    ├─ my-new-component.ts
    ├─ my-new-service.service.ts
    ├─ app.component.html
    ├─ app.component.scss
    ├─ app.component.ts
    ├─ app.module.ts
    ├─ app.routing.module.ts
    ├─ app.routes.ts
    └─ index.ts

「component」や「interface」等で、ディレクトリを切って、以下の様に整理したい！

front
├─ e2e
│   └─ ...
└─ src
    ├─ assets
    ├─ service
    ├─ directive
    ├─ interface
    ├─ class
    ├─ component
    │  ├─ component-name
    │  │  ├─ hoge.component.html
    │  │  ├─ hoge.component.css
    │  │  └─ hoge.component.ts
    │  ├─ component-name02
    │  ├─ share or common
    │  ....
    ├─ app.component.html
    ├─ app.component.scss
    ├─ app.component.ts
    ├─ app.module.ts
    ├─ app.routing.module.ts
    ├─ app.routes.ts
    └─ index.ts

このように、ディレクトリ指定する場合は、「先にディレクトリを生成しパスを指定」することによって可能の様です。

それでは、「component」ディレクトリを生成して、ディレクトリ以下に「component」ファイル一式を生成します。

mkdir src/app/component

ディレクトリを生成し、「component/」を含んだcomponentネーム指定を行うと。

ng g component component/my-new-component

このように、ディレクトリ以下に生成されます。

注意点としましては、ディレクトリが存在しないと、component/my-new-component の名前のcomponentが生成されますので、必ずディレクトリは用意しておきましょう。

create src/app/component/my-new-component/my-new-component.component.css
create src/app/component/my-new-component/my-new-component.component.html
create src/app/component/my-new-component/my-new-component.component.spec.ts
create src/app/component/my-new-component/my-new-component.component.ts
update src/app/app.module.ts

importのpathもきちんと通っていることを確認。

app.module.ts

import { MyNewComponentComponent } from './component/my-new-component/my-new-component.component';

と、この辺、記述されているドキュメントもあまり見当たらなかったので、ちょっと詳しく書いてみました。

テスト

ユニットテスト実行コマンドは「ng test」となります。

ng test

Karmaが起動し、ユニットテストの結果が表示されます。

「ng new」コマンドでアプリを生成した場合、「app.component.spec.ts」ファイルも生成されていて、こちらが初期時のユニットテストファイルとなります。

また、「ng test」は watchモードとなっておりますので、テストファイルを編集するとリアルタイムで結果が反映されます。

試しに、「app.component.spec.ts」ファイルの

expect(compiled.querySelector('h1').textContent).toContain('app works!');

の ‘h1’を ‘h2’に修正してみると、

app.component.spec.ts

it('should render title in a h1 tag', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('h2').textContent).toContain('app works!');
}));

テストに失敗するのが確認できます。

E2Eテストの実行は「ng e2e」コマンドとなります。

ng e2e

Spec started

  my-dream-app App
    ✓ should display message saying app works

Executed 1 of 1 spec SUCCESS in 0.685 sec.
[16:53:30] I/launcher - 0 instance(s) of WebDriver still running
[16:53:30] I/launcher - chrome #01 passed

このように、Karmaが立ち上がり、E2Eテストの実行されます。

E2Eテストのファイルは「e2e/」フォルダ以下に格納されています。

ビルド

最後に、ビルドコマンドを。

ビルドコマンドは「ng build」となります。

ng build

ビルドコマンドを行うと、ng new コマンドでアプリを生成した初期時だと、「dist」フォルダが生成され distフォルダ以下にビルドファイルが生成されます。

dist/

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

フォルダの指定は、.angular-cli.jsonの apps/outDir に記述されていますので、こちらを変更することによってビルド先を変更できます。

また、「ng build」コマンドは、environmentの指定も行えます。

ng build --environment prod

初期時では、上記のコマンドで本番環境の環境変数を用いたビルド指定となります。

ショートハンドは「-e」なので、「-e」でも「–environment」でもOKです。

また、通常「ng build」コマンドでは、digest付きのファイルは生成されないのですが、

ng build --prod

コマンドで、以下の様にdigest付きのファイルの生成がされるようです。

favicon.ico
index.html
inline.b0d6bc9c41cbf6dbc033.bundle.js
main.831ce8bb583d77b006cd.bundle.js
polyfills.2d45a4c73c85e24fe474.bundle.js
styles.d41d8cd98f00b204e980.bundle.css
vendor.205c7417e47c580a2c34.bundle.js

その他

その他、「何ができるっけ？？」と困ったら「ng help」コマンドを入力すると、行える事とコマンドオプションなどがドカーっと表示されますので、困った際は叩くとよいでしょう。

ng help

という事で、Angular CLI のご紹介でした。

ではでは。

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

Archives Details