問題タブ [zonejs]

webpack 4.29.3反応を使用して記述された埋め込み可能なウィジェットがあり、 andを使用して単一の js ファイルにバンドルされていますbabel 7。タグをhtmlに挿入するだけでwebpack-dev-server、すべてが正常に機能します。私のwebpack構成は次のとおりです：（私は含めました）production<script type="text/javascript" src="myWidget.js"></script>babel-polyfill

私のバベルの設定は次のとおりです。

しかし、Angular 4 で記述されたサイトにウィジェットを埋め込もうとすると、react webpack ビルドTypeError: t.finally is not a functionに を含めていると表示されます。angular でバベルのポリフィルをオーバーライドするpolyfillことが理由であることがわかりました。zone.jsホスト サイト (Angular サイト) のzone.jsバージョンを0.8.14から0.8.26埋め込み可能なウィジェットに更新すると、正常に動作します。私の質問は、実際のシナリオでは、ウィジェットが埋め込まれているホスト サイトを制御できません。では、そのようなシナリオでは、どうすればそれを克服できますか?

背景には、元々 angularjs で構築されたアプリがあり、現在は UpgradeModule を使用した angularjs/ angular ハイブリッドです。角度のあるゾーンから外れてゾーンに入るという問題が進行中<root>です。かなり再現性のある例を見つけました。

<root>ゾーンで立ち往生するというかなり頻繁に再発する問題に遭遇し、これに要約されました. したがって、プロミスを作成する 3 つの方法はすべて角度ゾーンから始まります。

new Promise(blahblah)

ZoneAwarePromise を返します

new $q(blahblah)

プロミスを返します

let def = $q.defer(); return def.promise

プロミスを返します

したがって、これは $q promise がゾーンでパッチされていないように見えるため、角度ゾーンが維持されておらず、コールバックが<root>. その結果、角度のある半分が非常に遅くなり (これが発生すると)、何らかのリモート要求からのプロミスのコールバックで何かが適用/ダイジェストを実行すると、時折ダイジェスト エラーが発生します。一般的な原因は $http と angularfire ライブラリからのコールバックなどです。

簡単に言えば、UpgradeModule は angularjs の約束 ($q) を ZoneAwarePromise のものとしてパッチすることを目的としていますか? それは私が期待していたものです。

編集: これは、StackBlitz のより基本的な例です。この例は、私のアプリと同じことを示しています: UpgradeModule は $q promises にパッチを適用しません: https://stackblitz.com/edit/github-fwbk4x?file=src%2Fapp%2Fhome%2Fapp.component.ts

mat-dialog にも同様の問題があり、開閉できませんでした。興味深いのは、コンポーネントを更新してから約 20 分間動作することです。しかし、その後、それは機能しなくなります。

私はこの問題https://github.com/angular/components/issues/9875 とこれhttps://github.com/angular/components/issues/9676 とこれhttps://github.com/angular/components/を読みましたissues/7550#issuecomment-345250406 およびこの StackOverflow の回答: ナビゲーション後に Angular Material Dialog が閉じない

すべてが、「どういうわけか、私のコードは角度ゾーンの外で実行されるため、ゾーンに再度入る必要がある」と提案しました

したがって、次のように変更します。

どういうわけか、openDialog を ngZone.run() でラップすると問題が解決します。

しかし、それは私が理解していない部分です。私のコードが角度の外で実行されるのはなぜですか? runOutsideAngular を明示的に呼び出すことはなく、onButtonClick は非同期コールバック内にもありません。

実際、 onButtonClick は、次のようなボタン要素に直接関連付けられています。

では、なぜ私のコードは outsideAngular で実行されるのでしょうか?