Angular Element。 Angular コンポーネントを Angular の外側で使用する

by

私たちは皆、コンポーネントについてよく知っています: Angular エコシステムの最も強力なビルディング ブロックです。 コンポーネントは、Dom がレンダリングされ、サービスが注入され、ビューが変更検出で再レンダリングされる場所です。 コンポーネントは、入力として値を取り、出力としてイベントを発生させることができます。 しかし問題は、この美しいブロックは今のところAngularのエコシステムの中でしか機能しないことです。 私は、Angular エコシステムの外でも Angular コンポーネントを使用して、人類を助けることができればと思います。 Angular 7 から、Angular は「Angular Element」という機能をもたらしました。 今、アンギュラーコンポーネントは、スタンドアロンのWebコンポーネントとしてエクスポートすることができます。 div や span などの典型的な HTML タグとまったく同じように、任意の HTML ページ、CMS、あるいは React や Vue.js プロジェクト内で使用できます。

How it works:

photo:

写真：。

Web Componentは、ブラウザで新しいカスタムHTML要素を定義するためのWeb標準です。 ブラウザは、customElementRegistry と呼ばれるレジストリを保持しています。 CustomElementRegistry.define() メソッドを使用して、「dom string」とその動作を定義するクラスを登録できます。

Angular の @angular/elements パッケージは createCustomElement メソッドを公開しており、これは、angular component とその依存関係を Web コンポーネントとして互換性のあるクラスとして転換します。 また、ポリフィルを使用して他のブラウザーでも動作可能にすることができます。

Use Cases:

Web コンポーネントとしてエクスポート可能な完全に機能するアンギュラー コンポーネントを利用できる使用例が少なくとも 3 件あります。

  • Micro front end
  • Legacy code migration
  • Plug & play Web components for third-party services

Micro front end:

マイクロサービスと同様、マイクロフロントエンドという概念も存在します。 マイクロフロントエンドのアーキテクチャでは、小さなフルスタック チームが、API だけでなく、それに対応するフロントエンド コンポーネントも提供する責任を負います。 例えば、「商品チーム」は、商品APIと、異なるカテゴリページ、商品詳細ページ、カート&チェックアウトページで使用されるすべての商品関連ビューを作成します。 このような場合、すべてのチームが異なる Web コンポーネントを提供し、1 つのフロントエンド チームはそれらのコンポーネントを異なるページで接着するだけです。

移行：

Angular 1.x で書かれたプロジェクトは、Angular への移行が常に難題でした。 簡単な魔法の呪文のような ng の更新はありません。 誰かがプロジェクトを React や Vue から Angular に移行したい場合にも同じことが言えます。 ここではWebコンポーネントが最も適している。 既存のコンポーネント/コントローラを徐々にAngularウェブコンポーネントに変換し、既存のシステムから置き換えていくことができます。

Third-party services:

Service Provider can provide plug & play web components to be glued in their client’s website without any further engineering needed.

So seems it is promising if we actually ship an angular component as a web component.Perhaps we can be available.

Example project:

Here is an example code we write a my-todo-list web component. 参考までに、Github でコード全体を確認できます。

Step 1: コンポーネントとサービスを書く

  • TodoList コンポーネントは、Todo のリストを表示するものです。
  • TodoList コンポーネントは、Todo が完了したとマークされたときに onTodoComplete イベントを発生させます。component.ts todo-list.component.ts
    https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/todo-list/todo-list.component.ts
    todo.service.ts

    todo.service.ts

    https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/todo-list/todo.service.ts

    Step 2: todo-list component をエクスポートするために app.modules を調整する

    • The project will be used only to export angular modules as a web component we need not bootstrapping through the app component.TD コンポーネントは、angular モジュールをエクスポートするために使用されるため、angular モジュールをエクスポートする必要はありません。
    • エクスポート可能な TodoList コンポーネントをエントリ コンポーネントとして宣言する必要があります。
    • angular/elements パッケージをインストールします。
    • ngDoBootstrapフックの中で、標準のWebコンポーネントとしてTodoListコンポーネントをコンパイルするのにcreateCustomElementメソッドを使用します。 Angular エコシステムの外部で使用されるため、依存関係をロードできるように Dependency Injector を手動で渡す必要があります。

    https://github.com/asad-mlbd/example-ng-element/blob/master/src/app/app.module.ts

    Step 3: Bundling

    • ここでビルドすると – “dist” フォルダにファイルが生成されます。 これを別のエコシステムで使用したいので、1 つの出力ファイルとしてファイルを連結するのがよいでしょう。 そこで、package.json の script セクションに次のコマンドを追加します:-

    "concat-es5": "concat -o output/output-es5.js ./dist/example-ng-element/runtime-es5.js ./dist/example-ng-element/polyfills-es5.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es5.js","concat-es2015": "concat -o output/output-es2015.js ./dist/example-ng-element/runtime-es2015.js ./dist/example-ng-element/polyfills-es2015.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es2015.js","concat": "npm run concat-es5 && npm run concat-es2015","build": "ng build --prod --output-hashing=none && npm run concat",
    • ここで、npm run build コマンドを実行すると、output フォルダ内に output-es5.js と output-es2015.js という 2 つの別々のファイルが生成されます。

    Step 4: Web コンポーネントとして使用する

    • これですべての設定が完了しました。 これらの出力ファイルは、次のようにスタンドアロンの Web コンポーネントとして使用できます：

    https://github.com/asad-mlbd/example-ng-element/blob/master/output/index.html
    • この HTML ページを実行してみると、Todo リストが取得されて表示されていることがわかります。
    • 入力として名前を渡すと、Web コンポーネント内に名前が表示されます。これは、コンポーネントの入力と変更の検出が機能していることを意味します。 つまり、出力イベントも機能しています！

    このように、他のプロジェクトでもangularコンポーネントは使用することができるのです。

    Ref:

    • https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
    • https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
    • https://angular.io/guide/elements

    からコードをコピーして自分で試すことができます。

コメントする