angular-cli環境でasync/awaitを書いてみる。

angular-cliを使ったAngular開発環境でasync/awaitが書けないもんかなーと思って色々調べてみたら書けたのでメモを残します。

$ ng new 

上記コマンドで既に環境が作られているものとして話を進めます。

必要なものをnpm install

$ npm install --save-dev babel-core babel-preset-latest
$ npm install --save babel-polyfill

tsconfig.jsonを編集

変更前のtsconfig.json

src/tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }

変更後のtsconfig.json

src/tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es2015",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "babelOptions": {
      "presets": [
        "latest"
      ],
      "plugins": []
    },
    "useCache": true,
    "useWebpackText": true,
    "doTypeCheck": false
  }
}

.gitignoreを編集

.gitignore

# 追加
.awcache

polyfills.tsを編集

変更前のpolyfills.ts

src/polyfills.ts

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

変更後のpolyfills.ts

src/polyfills.ts

// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/set';
// import 'core-js/es6/reflect';

// import 'core-js/es7/reflect';
import 'babel-polyfill';
import 'zone.js/dist/zone';

async/awaitのコードを書いてみる

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  constructor() {
    (async () => {
      console.log(1);

      await new Promise(resolve => {
        setTimeout(function () {
          console.log(2);
          resolve();
        }, 300);
      });

      console.log(3);
    })();
  }
}

実行してみる

$ npm start

これでコンソールには

1
2
3

の順で出力されます。

特にハックする必要もなくasync/awaitが書けました。