npmでクールなコンポーネントを見つけたが、接頭辞がng、ngx、angularなどである場合は、これについて動揺しないでください。 このコンポーネントを入手するには、多くの解決策があります。 この記事では、Angularチームによって公式にサポートされているソリューション、つまりAngular Elementsについて検討します。
実際には、
Awesome Angularから任意のコンポーネントを選択してください。
シンプルだが非常に興味深い
-ngx-avatarを選択しました。 次に、さまざまなソーシャルネットワークのアバターを表示するか、単にユーザーのイニシャルを表示します。
このようなもの：
そして彼はシンプルなAPIを持っています。ここに小さな例を示します：
<ngx-avatar facebookId="1508319875"></ngx-avatar> <ngx-avatar src="assets/avatar.jpg"></ngx-avatar> <ngx-avatar name="John Doe"></ngx-avatar>
それで、このためのAngularプロジェクトを作成してライブラリを接続しましょう。
ng new avatar-lib --minimalN npm i ngx-avatar --save
パッケージをモジュールに接続します。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
デフォルトで `AvatarModule`はその唯一のコンポーネントをエクスポートしないため、単純なコンポーネントを作成しましょう。
ng gc avatar
import { Component, ViewEncapsulation, Input } from '@angular/core'; @Component({ selector: 'app-avatar', template: ` <ngx-avatar [name]="name"></ngx-avatar> `, styles: [], encapsulation: ViewEncapsulation.ShadowDom }) export class AvatarComponent { @Input() name: string; constructor() { } }
簡単にするために、入力パラメーターの1つのみを使用しました。
これらすべてからユニバーサルコンポーネントを作成します。 要素を機能させるには、プロジェクトに角度要素を追加する必要があります。
ng add @angular/elements
とりわけ、このコマンドには、スクリプトセクションにカスタム要素を登録するための簡易バージョンも含まれます。
"scripts": [{ "input": "node_modules/document-register-element/build/document-register-element.js" }]
結果のapp.module.ts：
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { AvatarComponent } from './avatar.component'; import { AvatarModule } from 'ngx-avatar'; @NgModule({ declarations: [AvatarComponent], imports: [AvatarModule, BrowserModule], entryComponents: [AvatarComponent] }) export class AppModule { constructor(private injector: Injector) {
いいね！ 今、私たちはこのすべての善を集める必要があります。 これを行うには、コンポーネントを1つのjsファイルにパックする独自のコレクターを作成します。
const fs = require('fs-extra'); const concat = require('concat'); (async function build() { const files = [ './dist/avatar-lib/runtime.js', './dist/avatar-lib/polyfills.js', './dist/avatar-lib/scripts.js', './dist/avatar-lib/main.js' ]; await fs.ensureDir('elements'); await concat(files, 'elements/avatar-lib.js'); })();
すべて準備完了です！ 収集するだけです。 このようなスクリプトをpackage.jsonに追加します。
"build:elements": "ng build --prod --output-hashing none && node build.js"
さて、それだけです！ そのようなjsファイル `avatar-lib.js`の重量は、221 kBからgzipで60 KBです。 当然、より多くの
角度 /コアが含まれています。 ngx-avatar自体の重量は、gzipで約16.8kBと5.4kBです。 avatar-lib.jsの重量を大幅に削減するには、Ivy Compilerが必要ですが、これは別の記事のトピックです。 （この時点でIvyがリリースされるか、現在入手可能なものから手動で収集することを望みます）。
Angular Elementsは私たちに何を与えましたか？
これは、Webコンポーネントを実装するための便利なAPIです。 実際、それなしでもできます。 以前に何ができたかをご覧ください：
Jia Liの記事（現在Zone.jsに積極的に付属しています） 。
コンポーネントを他のフレームワークに埋め込みます。
Vueで最初に。 便利な方法で接続し、avatar-libをテンプレートに挿入し、標準のvue bingを介してデータを転送します。
<avatar-lib :name = 'myName'></avatar-lib>
Outputイベントを整理することも可能です。
Vueデモ：
https :
//github.com/Jamaks/angular-element/tree/master/ang-el-vueReactの時間です！ すべてが同じくらい簡単です：
<avatar-lib name = {this.myName}></avatar-lib>
React Demoまあ、一般的に、プロジェクト現時点でのブラウザのサポートに関して：
https://angular.io/guide/elements#browser-support-for-custom-elementshttps://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/defineもちろん、この実装方法を使用するかどうかはあなた次第です。 UIコンポーネントは何にもアタッチせず、同様のサフィックス（ng-、ngx-、v-、react-、rc-など）を付けないようにします。
ボーナス！コンポーネント（ngx-avatar）のサイズに触発されて、私はまだngtsc、ngccをフィードしてから、ロールアップを使用してアセンブルしようとしました。 しかし、選択したコンポーネントには多くの外部モジュールが必要だったため、試行は失敗しました。 絶望的で、このコンポーネントにいくらか似ていて、その結果はうれしい驚きでした-現時点（7.1.2）では、ライブラリはgzipで〜96kbと〜26kbでした。 当然のことながら、多くの依存関係があり、私のロールアップ構成には多くの要望が残されています。 しかし、それでも、これはIvyのプレゼンテーション中に表示された3kbではありません。 ngccをWebpack（cli）に展開し、ドキュメントを作成するときは、期待されることです。
また、Angularの世界から小さな実験やインサイダーを
見つけることも
できます 。