Angular6でWebComponents入門

先日のAngular6リリースに伴って追加された@angular/elementsを使用し、WebComponents作成していきます。
1. Angularのプロジェクトを作成する
angular cliのインストール及びプロジェクトの作成を行います。
> npm i -g @angular/cli
> ng new fh-components --prefix fh
2. @angular/elementsを追加する
ng add
コマンドから追加することで、使用するための依存関係やファイルを作成してくれます。
> ng add @angular/elements
info Direct dependencies
└─ @angular/elements@6.0.9
info All dependencies
└─ @angular/elements@6.0.9
✨ Done in 5.57s.
Installed packages for tooling via yarn.
Added `document-register-element` as a dependency.
Added document-register-element.js polyfill to scripts
UPDATE package.json (1395 bytes)
UPDATE angular.json (3756 bytes)
3. コンポーネントを作成する
インラインオプションとspecファイルなしを付与し、コンポーネントを生成します。
> ng g component button --inline-style --inline-template --spec false
生成されたコンポーネントを編集し、以下のようにしました。
4. CustomElementを作成する
@angular/elementsのcreateCustomElement関数を使用して、ブラウザネイティブのcustomElements.define機能で使用できるインスタンスを作成していきます。
また、entryComponentsにButtonComponentを登録することでAppModule内でButtonComponentを使用することが出来るようになります。
app.module.tsはこのようになりました。
これでWebComponentsのソースコードができました、次はビルドして実際に使ってみます
5. 実際に使ってみる
今回サーバを建てるのはhttp-serverを使います
npm i -D http-server
tsconfig.jsonのtargetを編集します。
"target": "es2015"
package.jsonのscripts
へビルドとパッケージング、サーバ立ち上げの3つのスクリプトを追加します。
"build": "ng build --prod --output-hashing=none"
"package": "cat dist/fh-components/{runtime,polyfills,scripts,main}.js | gzip > fh-components.js.gz"
"serve": "http-server --gzip"
プロジェクトルートにindex.htmlを作成します。
あとはコマンドを打ち込むだけです
> npm run build
> npm run package
> npm run serve
立ち上がったサーバにアクセスします、デフォルトでhttp://127.0.0.1:8080
に立ち上がるようです。
アクセスするとfh-component
が動作することがわかります。
まとめ
思っていたよりも手軽にAngularの記法を用いてWebComponentsを作成することができました。
jsファイルを読み込むだけであらゆる場所で使えるコンポーネントというのは大きな魅力で、各ブラウザのWebComponents対応が進んでいけば、WebComponentsを用いた開発も近い将来実用的になっていくような気がしました。
参考: “Building Custom Elements/Web Components with Angular 6” by @sulco