はじめに

Angular Elements で単一の js ファイルとして build する方法とそれを読み込む方法をまとめます。

Angular Elements に限らず、Angular は build すると複数ファイルに別れてしまいますし、Angular8 から es5 と es2015 でファイルが別れてしまうため、例えば Hugo など別フレームワークから import しずらい状況です。

それを package.json の scripts でなんとかするお話です。

Angular Elements の build

package.json の scripts に build:elements のような行を追加します。
<YOUR SITE NAME> は適宜自分の ng new <YOUR SITE NAME> した値に置き換えてください。

"scripts": {
    〜省略〜
    "build:elements": "ng build --prod --output-hashing=none && cat dist/<YOUR SITE NAME>/{runtime-es5,polyfills-es5,scripts,main-es5}.js > dist/<YOUR SITE NAME>/app-<YOUR SITE NAME>-es5.js && cat dist/<YOUR SITE NAME>/{runtime-es2015,polyfills-es2015,scripts,main-es2015}.js > dist/<YOUR SITE NAME>/app-<YOUR SITE NAME>-es2015.js"
  },

すると以下のように dist 配下にbuild結果が es5 と es2015 それぞれ吐き出されます。

$ ls -lh dist/<YOUR SITE NAME>/
total 4208
-rw-r--r--  1 nao  staff   433K 10 17 08:08 app-<YOUR SITE NAME>-es2015.js
-rw-r--r--  1 nao  staff   569K 10 17 08:08 app-<YOUR SITE NAME>-es5.js
-rw-r--r--  1 nao  staff    61K 10 17 08:08 styles.css

Angular Elements の読み込み

Angular Elements を他の webアプリケーションから読み込む際には以下のような感じです。
es2015 が読み込めるのであれば読む。無理なら es5 を読む。みたいな感じですね。

<script type="module" src="js/app-<YOUR SITE NAME>-es2015.js"></script>
<script src="js/app-<YOUR SITE NAME>-es5.js" nomodule defer></script>

<link rel="stylesheet" href="css/styles.css">

ivy の有無によるサイズ比較（Angular8 編）

おまけとして Angular8 時点での ivy の有無によるバンドルサイズの比較をしてみます。
Angular Elements でWeb Components化した Dialog をHugo に埋め込むにて作成した Angular Material の Dialog Component を利用したガジェットで比較してみます。

ivy は tsconfig.app.json の angularCompilerOptions.enableIvy を編集することで enable/disable を変更できます。

"angularCompilerOptions": {
    "enableIvy": true
    // "enableIvy": false
  }

ivy を enable とした時

$ ls -lh dist/img-modal/
-rw-r--r--  1 nao  staff   433K 10 17 08:08 app-img-modal-es2015.js
-rw-r--r--  1 nao  staff   569K 10 17 08:08 app-img-modal-es5.js
-rw-r--r--  1 nao  staff    61K 10 17 08:08 styles.css

ivy を disable とした時

$ ls -lh dist/img-modal/
-rw-r--r--  1 nao  staff   416K 10 18 07:57 app-img-modal-es2015.js
-rw-r--r--  1 nao  staff   554K 10 18 07:57 app-img-modal-es5.js
-rw-r--r--  1 nao  staff    61K 10 18 07:57 styles.css

enable した方が増えてる....
ivy は Angular9 で GA 予定なので今後に期待ですね。

まとめ

Angular 8 の Angular Elements で単一の jsファイルとしてbuildする方法をまとめました。
Github はこちら

github.com