web-dev-qa-db-ja.com

Angular 4アプリがIE11とエッジで機能しない

私はangular 4アプリに取り組んでおり、IE11とEdgeを除くすべてのブラウザーで正常に動作しています。ソリューションを確認し、es15サポートを追加し、サポートするポリフィルを追加しましたIE =しかし、それでも正しく機能していません。

問題：IEで最初にロードされず、数回の更新後にロードされますが、完全にはロードされません。

私はすでに述べたようにポリフィルの修正を行いました ここ

どんな助けでもかなりです

ありがとう

angularpolyfills
5
Vikram

さまざまな方法とモジュールを試した後、すべてのブラウザーでangular 4アプリと互換性を持たせるための次の解決策になりました。

* BROWSER POLYFILLS
*/

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/client/shim';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/** ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
* APPLICATION IMPORTS
*/

/* polyfill ie11 */
import 'core-js/es7/array';
import 'core-js/es7/reflect';

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// Run `npm install --save intl`.
import 'intl'; 
import 'intl/locale-data/complete.js';
import 'intl/locale-data/jsonp/en.js';

if (typeof SVGElement.prototype.contains == 'undefined') {
    SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}

プロジェクトにインストールしたモジュールによっては、他のポリフィルが必要になる場合があります。たとえば、いくつかのチャートやグラフでは、追加の構成が必要になる場合があります。

8
Vikram

Edgeでも同じ問題が発生していました。必要なポリフィルをすべて追加した後、私のWebサイトがEdgeに読み込まれませんでした。

EdgeでWebページのコンテンツをレンダリングしているときに（Google Chrome、Mozilla、IEで完全に正常に機能したため）、[hidden]属性に問題があり、その属性を削除した後、Edgeで完全に正常にロードされたWebサイトが見つかりました。

したがって、[hidden]を使用する代わりに、*ngIfを使用してコンテンツを表示および非表示にします。

そして、これがMicrosoft Edgeで機能しないことを私が見つけた考えられる理由は、次のとおりです。

hiddenグローバル属性は、要素がまだ関連していないか、関連していないことを示すブール属性です。そのため、ブラウザは非表示の属性が設定された要素をレンダリングしません。

ブラウザは、「display: none」スタイルを非表示の属性を持つ要素に添付します。また、コンポーネントがロードされると、スタイル「display：none」は自動的に更新されません。

また、*ngIfは、hiddenのような表示プロパティに基づいて要素を表示/非表示にしません。これは、DOMに要素を追加および削除することで機能します。

3
Shubham Jain