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
Uncaught Error: Zone already loaded.
at polyfills.d19af636bcf00eb4898f.js:1
at polyfills.d19af636bcf00eb4898f.js:1
at Object.0TWp (polyfills.d19af636bcf00eb4898f.js:1)
at a (runtime.f35a2a91d37680127d85.js:1)
at Module.hN/g (polyfills.d19af636bcf00eb4898f.js:1)
at a (runtime.f35a2a91d37680127d85.js:1)
at Object.1 (polyfills.d19af636bcf00eb4898f.js:1)
at a (runtime.f35a2a91d37680127d85.js:1)
at r (runtime.f35a2a91d37680127d85.js:1)
at Array.t [as push] (runtime.f35a2a91d37680127d85.js:1)
私もこのソリューションを試してみましたが、成功しませんでした: - https://www.npmjs.com/package/elements-zone-strategy
私はAngular Elementsを初めて使用します。どんな助けでも大歓迎です。