問題タブ [angular-elements]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 角度プロジェクト内で複数の角度要素を Web コンポーネントとして使用する
3 つの @angular プロジェクトがすべて v6.1.9 を使用している場合: host、alpha、およびbeta
alphabeta@angular/elements などを使用して、それぞれ Web コンポーネントを作成および定義します。
alphaおよびbetaを使用してビルドされng build --prod --output-hashing none、ビルド後のスクリプトが実行されて、結果のファイルが次の順序で連結されますscripts.js, styles.js, runtime.js, main.js。
polyfills.js はmain.ts、ライブラリのロード時に使用されるポリフィルが既に定義されているかどうかをチェックするため、スキップされます (たとえば、zones.js を再定義しようとするのを避けるため)。
結果のバンドルはalpha-component.bundle.jsとbeta-component.bundle.jsです。
hostタグ付きの<head>で上記のバンドルを参照します。index.html<script defer>
バンドルがalphathenの順序で参照されている場合、 2 回ブートストラップしようとしているbetaことがわかります。逆の順序で、ブートストラップを 2 回試みているalphaことがわかります。beta
最初に参照されたバンドルは 2 回ブートストラップを試行するため、バンドルの Web コンポーネントを 2 回定義しようとするため、エラーが発生し、2 番目に参照されたバンドルの Web コンポーネントは登録されません。
目標は、@angular を使用して多くの Web コンポーネントを作成し、それらを他の @angular またはinsert framework hereテクノロジー内で使用できるようにすることです。
angular - @angular/elements のデータ ソースからビュー ターゲット データ バインディングへの一方向
@angular/cli v7.0.3 で生成されたプロジェクトがあります。
ここに小さなデモ アプリケーションをプッシュしました: https://github.com/collinstevens/web-component-sender
@angular/elements と @webcomponents/webcomponentsjs ポリフィルを追加しました。
基本的な Angular コンポーネント AppComponent と、ReceiverComponent を Angular コンポーネントとして、web-receiver を Web コンポーネント タグとして使用する AppModule コンストラクターで定義された @angular/element を使用して構築された Web コンポーネントがあります。
AppComponent に入力すると、AppComponent と ReceiverComponent が更新された値で更新されることを期待しています。
現在、AppComponent のみが更新された値を受信していますが、ReceiverComponent は AppComponent に設定された初期値のみを表示します。
https://angular.io/guide/elements#mappingを指定すると、ReceiverComponent の myValue Input() を my-value としてマップする必要があります。
AppComponent
ReceiverComponent
アプリモジュール
angular - Angular6 アプリで使用する場合の Angular Elements のバグ
Angular Elements を使用してウィジェットを作成すると、奇妙な動作に直面しています。別のサイトで簡単なフィードバック フォームをポップアップ表示するウィジェットを作成し、Angular でビルドし、開発ではうまく機能しますが、実稼働用にアプリケーションをビルドすると、ウィジェットと一部の遅延ロード モジュールとの間に非互換性があります。
ウィジェットは、アプリケーションが最初にロードされるときに、外部 URL からアプリケーションにロードされます。次に、アプリケーションにログインし、モジュールが遅延ロードされると、次のエラーが報告されます
いくつかのコンテキスト情報:
- ウィジェットは "@angular/elements": "^7.0.1" を使用してビルドされます
- ウィジェットが pollyfill を使用しているのは、Web コンポーネントがまだ広く採用されていないためです。
- pollyfills は Zone.js を使用します
- アプリはAngular 7.0.1を使用して構築されています
このあいまいなエラー メッセージを掘り下げると、これはアプリとウィジェットによって 2 回読み込まれた Zone.js に関連していることがわかりました。これはこれに関連する問題です - https://github.com/angular/angular/issues/24466 - https ://github.com/angular/angular/issues/24181 - https://github.com/angular/angular/issues/26158
私もこのソリューションを試してみましたが、成功しませんでした: - https://www.npmjs.com/package/elements-zone-strategy
私はAngular Elementsを初めて使用します。どんな助けでも大歓迎です。