【Angular】Angular Seed から Angular CLI へ移行(ビルド・テスト編)

概要

Angular SeedというGulpを利用して独自にビルド環境を構築しているプロジェクトがあります。その環境をAngular CLIに移行する際のメモ等を記載していきます。　　 今回はビルドとテストの移行を記載します。

詳細は以下のプロジェクトをご確認ください。

github.com

この記事でははまった箇所等を記載していきます。

動作環境

• Node.js 8.x
• Angular 6.0.x

ビルド時の影響箇所

• package.jsonの依存関係
  • @angular-devkit/build-angular, @angular/cli, typescript を追加します。
• env.config.ts の JSON.parse('<%= ENV_CONFIG %>');
  • dev, test, prod環境の設定がこの設定で書き換わるので、このファイルに各環境設定を記載しましょう。
  • サンプルプロジェクトの場合、angular.json の fileReplacements 機能を利用して対応しています。
• tsconfig
  • Angular CLIで作成したtsconfigファイルを持ってきてディレクトリパス等を調整します。

テスト時の影響箇所

• package.jsonの依存関係
  • ビルド時と同様の設定をします。
• env.config.ts
  • ビルド時と同様です。テスト用の設定を分けておいてfileReplacements を利用すると便利です。
• tsconfig
  • Angular CLIで作成したtsconfigファイルを持ってきてディレクトリパス等を調整します。
• test.ts
  • Angular Seedは特殊で単体テストがすべてexport function main内にdescribeが記載されています。この為、そのままAngular CLIに移行すると動きません。
  • Angular Seedで動作させなくてよい場合は、export function mainを削除してdescribeのみにしましょう。
  • Angular Seedの互換を維持する場合は、test.tsを修正してmainメソッドを呼び出すようにします。

 // Then we find all the tests.
 const context = require.context('../../src/client/', true, /\.spec\.ts$/);
 // And load the modules.
context.keys().map(key => {
    // main メソッドが存在する場合、呼び出す
    if (context(key).hasOwnProperty('main')) {
        context(key).main();
    }
    return key;
}).map(context);

Visual Studio Codeでのデバッグについて

• ソースマップのオーバーライドは不要です。
• 以下のような設定を追加して、Chrome起動時にアタッチすれば問題ありません。

    {
      "name": "Attach to Chrome - Angular CLI",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
   }

あとがき

今後のメンテナンスを考えるとAngular CLIにあわせるのが良いかと思います。ビルド速度もCLI利用ですとだいぶ早いです。
またSystemJS特有のパス設定まわりをライブラリの追加・バージョンアップのたびにメンテナンスをするのは結構大変です・・・。大変でした・・・

参考URL

• Angular Seed: https://github.com/mgechev/angular-seed
• Angular CLI: https://cli.angular.io/