OnsenUI2 × Angular2の開発環境メモ #Angular2

OnsenUI2-Angular2の開発環境メモ
モバイルUIフレームワークのド本命、Onsen UI 2正式リリース！──React, Angular 2両対応！: https://html5experts.jp/n_matagawa/20766/

作業ディレクトリを作成
コマンドで作業ディレクトリまで移動

npm init --yes

OnsenUIの本体をインストール

npm install onsenui@2.x.x --save

アプリのビルドに使用するツールのインストール

npm install --global typescript
npm install --global typings
npm install --global webpack

Angular 2の動作に必要なライブラリ

npm install core-js --save
npm install reflect-metadata --save
npm install zone.js --save
npm install rxjs --save

Angular 2のインストール

npm install @angular/core@2.x.x --save
npm install @angular/common@2.x.x --save
npm install @angular/compiler@2.x.x --save
npm install @angular/platform-browser@2.x.x --save
npm install @angular/platform-browser-dynamic@2.x.x --save

Onsen UIのAngular 2バインディング

npm install angular2-onsenui@1.0.0-rc.1 --save

Angular 2アプリのビルドに必要な型定義ファイル
(あまりよくわからないですけど、下記をインストールすれば動きます・・・)

typings install --global dt~core-js#0.0.0+20160725163759

main.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { OnsenModule, onsNotification } from 'angular2-onsenui';

@Component({
    selector: 'app-root',
    template: `
        <ons-page>
            <ons-toolbar>
                <div class="center">Onsen UI</div>
            </ons-toolbar>

            <div style="text-align: center;">
                <p>Hello World!</p>
                <ons-button (click)="alertPopup()">Click Me!</ons-button>
            </div>
        </ons-page>
    `,
})
export class AppComponent {
    alertPopup() {
        onsNotification.alert('Onsen UI alert');
    }
}

@NgModule({
  imports:      [ OnsenModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  schemas:      [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

次のコマンドを実行

tsc --init

生成された tsconfig.json を以下の内容に書き換えます。

tsconfig.json

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "exclude": [
        "node_modules"
    ]
}

次のコマンドでmain.bundle.jsを生成

# トランスパイル
tsc

# バンドル
webpack main.js main.bundle.js

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css">
    <script src="node_modules/onsenui/js/onsenui.min.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/zone.js/dist/zone.min.js"></script>
</head>
<body>
    <app-root></app-root>

    <script src="main.bundle.js"></script>
</body>
</html>

ファイル構成は以下のようになる
├── index.html ├── tsconfig.json ├── main.ts ├── main.js ├── main.bundle.js ├── node_modules │ ├── @angular │ │ ├── common │ │ ├── compiler │ │ ├── core │ │ ├── platform-browser │ │ └── platform-browser-dynamic │ ├── angular2-onsenui │ ├── core-js │ ├── onsenui │ ├── reflect-metadata │ ├── rxjs │ └── zone.js ├── package.json └── typings ├── globals │ └── core-js └── index.d.ts