Angular 2/4/5がIE11で機能しない

124

IE 11で実行しているときに、angular 2アプリがLoading ...を表示したままになる理由を理解しようとしています。

誰かの提案に従って、スタックオーバーフローで誰かが投稿したこのプランカーをchromeとIE 11の両方で試しました。Chromeでは正常に動作しますが、IE 11では失敗します。同じエラーが発生し、「読み込み中...」と表示されます。

プランカーは次のとおりです。https：//plnkr.co/edit/6zVFbrH5yohwc714gBbk？p = preview 

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Router Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

IE 11がAngular 2アプリの実行に失敗する理由について誰かが何か考えを持っていますか？

ありがとうございました！

angular  typescript  internet-explorer 
— パットボーンクラッシャーラプランテ
ソース
答えは今のところ2.0.0-beta.0を使用することです。
— Pat Bone Crusher Laplante

回答:

187

の最新バージョンはangular 、デフォルトで常緑樹ブラウザにのみ設定されています...

現在の設定は、いわゆる「エバーグリーン」ブラウザ用です。自動的に更新される最新バージョンのブラウザ。これには、Safari> = 10、Chrome> = 55（Operaを含む）、Edge> = 13（デスクトップ）、iOS 10およびChrome（モバイル）が含まれます。
言及されていませんが、これにはFirefoxも含まれます。

特定のブラウザーに推奨されるポリフィルのリストとともに、ブラウザーサポートの詳細については、こちらをご覧ください。https://angular.io/guide/browser-support#polyfill-libs

つまり、IE11以下でAngularを動作させるには、正しいポリフィルを手動で有効にする必要があります。

これを行うには、polyfills.ts（srcデフォルトではフォルダー内）に移動し、次のインポートのコメントを外します。

/***************************************************************************************************
 * 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/set';

コメントは文字どおりファイル内にあるため、簡単に見つけることができます。

それでも問題が解決しない場合は、提案どおりにtargetプロパティをes5にダウングレードできます。これにより、定義のコンパイル出力が定義に変更されます。たとえば、ファットアロー関数（）は、無名関数（）にコンパイルされます。es6でサポートされているブラウザーのリストは、こちらで確認できます。tsconfig.json@MikeDubes6es5()=>{}function(){}

ノート

• @jackOfAllユーザーがエバーグリーンブラウザを必要としない場合でも、IE11ポリフィルが読み込まれるかどうかについてコメントで尋ねられました。答えは、はい、そうです！IE11ポリフィルを含めると、ポリフィルファイルが~162KBに~258KB8月8日'17のよう。私はこれを解決するために投資しましたが、現時点では可能ではないようです。

•IE10以下でエラーが発生する場合は、問題の原因を特定してpackage.jsonダウングレードwebpack-dev-serverしてください2.7.1。これより高いバージョンでは、「古い」IEバージョンはサポートされなくなりました。

— Zze
ソース
3
私のangular 5プロジェクトでも、IEのポリフィルのコメントを外しても同じエラーが発生しますが、IEブラウザでは機能しません。奇妙すぎる...
— アビー
上記のすべてのインポートのコメントを外し、その下のNgClassをインポートします。最後に「npm install --save classlist.js」をインストールします。これは私の場合にはうまくいきました。
— Vaibhav
2
@dudewad私は2つの個別のバンドルを作成し、1つを明示的にIE11用に作成し、そのバンドルをIEの条件付きコメントでラップして、Chromeでの配信を停止していた。
— Zze
1
@Zzeよく、それは確かにあなたの完全です。いいですね。
— dudewad
1
@Zze条件付きコメントはIE10で削除され、IE5-9でのみサポートされています。そのため、実行時にバンドルをページに追加するためにユーザーエージェントのスニッフィングを明確に行わない限り、IEバンドルはIE10 +用にロードされません。
— bmcminn 2018年
22

私はまったく同じ問題を抱えていて、解決策はどれも私のために機能しませんでした。代わりに、以下の行を（homepage）.htmlに追加して<head>修正します。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— アレックスW.
ソース
このSOstackoverflow.com/questions/26346917/…からの情報を考慮すると、X-UA-Compatibleを使用することの推奨は無効のようです。
— Lubiluk
19

今日、この問題に遭遇しました。新しいバージョンのベータ版に移行する必要のない解決策をGitHubで見つけました。

次のスクリプトをHTMLに追加します。

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

これで問題は解決しました。詳しくは、こちらのgithubの問題をフォローしてください：https : //github.com/angular/angular/issues/7144

— アシュリーグレノン
ソース
2
このソリューションは私にはうまくいきませんでした:( ... [IEで実行されているVS2015プロジェクト]
— Ceylan MumunKocabaş16年
12

2017年2月現在

Angular-Cliプロジェクトを使用すると、polyfills.tsファイル内のすべての行のコメントが既に解除されているため、すべてのポリフィルがすでに利用されていました。

私は私の問題を解決するためにこの解決策をここに見つけました。

上記のリンクを要約すると、IEはes6の機能であるラムダ矢印/ファット矢印関数をサポートしていません。（これはpolyfills.tsが機能しない場合です）。

解決策：es5をターゲットにする必要があります IEバージョンで実行するには、ます。これに対するサポートは、Microsoftの新しいEdge Browserでのみ導入されました。

これは次の場所にありsrc/tsconfig.jsonます：

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— マイクダブ
ソース
この答えは非常に誤解を招くものです。polyfillsは、IE 9以降をES6標準と互換性のあるスクリプトにするスクリプトです。angular.io / docs / ts / latest / guide / browser-support.htmlしたがって、ブラウザーがネイティブに矢印関数をサポートしているかどうかは関係ありません。ポリフィルはこの問題を完全に緩和します。
— Zze
8
私のケースで私が経験したものはどうですか...誤解を招くでしょうか？ポリフィルはすでにコメントが外されており、IE11で発生していた問題は修正されませんでした。これは反対票に値するとは思えない。
— MikeDub 2017
これをもう一度読んだ後、あなたの言っていることが理解できましたが、現在の言い方では、すべての.tsファイルを手動で太い矢印を使用してから機能を変更する必要があるようです。今後、問題を軽減するecmaスクリプトのターゲットを変更する場合は、コンパイラーの出力がどのように異なるかについて、そのリンクから引用を抜粋する必要があると思います。
— Zze
5
さらに、私はすでにtsconfigでes5をターゲットにしており、まだ問題があります。
— gh0st
1
@MikeDub私はあなたのソリューションを使用してみましたが、IE11では機能しません。より良いアプローチを提供してくれませんか。
— Prasanna Sasne
11

適切なセクションのコメントを外して、ターゲットブラウザーのpolyfills.tsファイルを調整する必要があります。

/** 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';
— ジガー・バット
ソース
1
これは素晴らしい。ありがとうございました。
— AtLeastTheresToast
10

私はiexplorer 11とAngular 2を使用して、上記のすべての問題を2つのことを行うことで修正しました

index.htmlに 追加：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

src \ polyfills.tsの コメント解除：

/** 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';
— ベレンマーティン
ソース
1
はい、これはIE11のためではなく、IE10のために働いている：ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)
— ジュニアMayhé
10
  1. polyfill.tsファイルの一部のインポートのコメントを外します。

/** 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';
スニペットを展開

npmパッケージのインストールコメントにnpm installコマンドがいくつかあることに注意してください。Angular CLIの初期バージョンを使用している場合は、3つ目のバージョンも存在する可能性があります。Angular CLIバージョン7、6、および1.7の場合、以下を実行する必要があります。

npm install --save classlist.js

npm install --save web-animations-js

IEを開いてアプリケーションをレンダリングし、確認してください:)

— アリ
ソース
8

2017年9月現在（ノードバージョン= v6.11.3、npmバージョン= 3.10.10）、これは私にとってはうまくいきました（@Zzeに感謝します）。

polyfills.tsIE11に必要なインポートを編集してコメントを外します。

より正確には、IE11に必要なすべての行を編集しpolyfills.ts（srcデフォルトではフォルダーにあります）、コメントを外します（ファイル内のコメントは、IE11で実行するために必要なインポートを正確に説明しています）。

小さな警告：classlist.jsおよびの行のコメントを解除するときに注意してくださいweb-animations-js。これらのコメント行にはそれぞれ特定のコメントがあります。コメントを外す前に関連するnpmコマンドを実行する必要があります。そうしないと、polyfills.tsの処理が中断します。

説明として、ポリフィルはWebブラウザーに機能を実装するコードの一部であり、それをサポートしていません。これが、デフォルトのpolyfills.ts構成でアクティブになっている理由です（これは、いわゆる「エバーグリーン」ブラウザーを対象としているためです。ブラウザーの最新バージョンは、自動的に更新されます）。

— エケコ
ソース
8

編集2018/05/15：これはメタタグで実現できます。そのタグをindex.htmlに追加し、この投稿は無視してください。

これは質問に対する完全な回答ではありませんが（技術的な回答については、上記の@Zzeの回答を参照してください）、追加する必要がある重要なステップがあります。

互換モード

適切なポリフィルが配置されていても、IE11でポリフィルを使用してAngular 2+アプリを実行すると問題が発生します。イントラネットホストからサイトを実行している場合（つまり、http：// localhostまたは別のマップされたローカルドメイン名でサイトをテストしている場合）、互換表示設定に移動して、[互換表示でイントラネットサイトを表示する]チェックボックスをオフにする必要があります。 IE11の互換表示は、AngularのES5ポリフィルに含まれるいくつかの規則に違反しているためです。

ここに画像の説明を入力してください

— ショットガン忍者
ソース
1
このソリューションに従う場合は、アプリケーションを実行しているすべてのクライアントでこれを行う必要があります。htmlファイルに特別なタグを追加すると、ブラウザーは互換モードではなく、利用可能な最新バージョンで実行されます。タグを見つけるには、次の回答を参照してください
— Poly
2
私の経験では、アプリがイントラネットホストで提供されている場合、このメタタグを使用しても、IE 11のデフォルト設定の[互換表示でイントラネットサイトを表示する]は上書きされません。イントラネットアプリのユーザーは引き続き、このオプションを手動でオフにする必要がありますが、これは理想的とは言えません。私は現在、回避策を探しています-おそらくES6ではなくES5にコンパイルします。
— カイルヴァセッラ2018年
6

私はAngular4アプリケーションを持っていますが、IE11ブラウザーでも機能していませんでした。以下の変更を行ったところ、正しく機能するようになりました。以下のコードをindex.htmlファイルに追加するだけです

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

これらの行をpolyfills.tsファイルからコメント解除する必要があるだけです。

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';

上記の2つの手順で問題が解決します。何か問題があるかどうかをお知らせください。ありがとう!!!

— サンジャイ・ティワリ
ソース
私は、コメントを解除し、2部thses既に持っているが、それはまだ動作していない、あなたは別の解決策持っているか
— Mennaラマダン
5

それでもまだすべてのJavaScript関数が機能していないという問題がある場合は、この行をポリフィルに追加してください。欠落している「値」メソッドを修正します。

import 'core-js/es7/object';

そして、この行は不足している 'includes'メソッドを修正します：

import 'core-js/es7/array'
— キリスト教徒
ソース
4

同じ問題が発生していましたが、互換表示でイントラネットサイトの表示を有効にした場合、polyfills.tsは機能しませんが、言われたとおりに次の行を追加する必要があります。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— イヴァン・ロペス
ソース
2

うまくいったのは、IE 11でアプリケーションのパフォーマンスを向上させるために次の手順を実行したことです。1）Index.htmlファイルに、次のCDNを追加します。

<script src="https://npmcdn.com/angular2@2.0.0- 
 beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

2.）polyfills.tsファイルに次のインポートを追加します。

import 'core-js/client/shim';
— ガウラフ・グプタ
ソース
2

polyfills.ts内

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/es7/array';

import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/set';

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

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
— クルディップDガンジー
ソース
2

他の解決策がどれもうまくいかない場合は、問題の原因を調査する価値があります。npmモジュールが、トランスパイルできないES6コードを直接挿入するのではない場合があります。

私の場合、私は

SCRIPT1002：次の行の構文エラーvendor.js（114536,27）：

const ucs2encode = array => String.fromCodePoint(...array);

私はnode_modulesフォルダーを検索し、その行がどのファイルから来たかを見つけました。犯人はpunycode.jsで、その2.1.0バージョンではES6を直接使用していることがわかりました。

ES5を使用する1.4.1にダウングレードした後、問題は解決しました。

— typhon04
ソース
1
ご返信ありがとうございます。それは問題を解決しませんでしたが、トラブルメーカーモジュールを見つけ、その問題について作者に知らせるのに役立ちました。
— lucifer63 2018
2

Angular8でこの問題を解決する方法

polyfills.tsのコメントを外してimport 'classlist.js'; 、とimport 'web-animations-js';を使用npm install --save classlist.jsして2つの依存関係をインストールしますnpm install --save web-animations-jsます。

更新 tsconfig.jsonで"target":"es5",

次にng serve、アプリケーションを実行してIEで開くと、機能します

— リホ
ソース
1

  1. src / polyfill.jsのIEセクションのコメントを外し、

    / ** IE10およびIE11は、SVG要素でのNgClassサポートのために以下を必要とします* /

    「classlist.js」をインポートします。

  2. 不足しているパッケージのビルドエラーがある場合、

    npm install classlist.js --save-exact

  3. デフォルトのIEドキュメントモードを設定するには、必ず以下の行を含めてください。それ以外の場合は、バージョン7で開きます

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
— スデール・ムハメッド
ソース
0

私はこのスレッドのすべてのソリューションと他のソリューションの束を試しましたが、成功しませんでした。最終的に私がこれを修正したのは、メジャーバージョンの変更を含め、プロジェクトのすべてのパッケージを更新することでした。そう：

  1. 古いnpmを実行する
  2. 結果の現在の列に表示されている番号でpackage.jsonを更新します（これによりプロジェクトが壊れる可能性があります。注意してください）。
  3. npm installを実行します
  4. 他の回答に記載されているように、ポリフィルのコメントも外したことを確認しました。

それでおしまい。どのライブラリが原因であるかを特定できればいいのにと思います。私が得ていた実際のエラーは、Angular 6のvendor.jsの「構文エラー」でした。

— ヨルダン
ソース
0

Angular 9はそのままIE11で問題なく動作するはずです。

ここに記載されているすべての提案を試しましたが、どれもうまくいきませんでした。しかし、インポートした特定のライブラリーまで正確に追跡できましたapp.module（ZXingScannerModule正確には）。最初のページのIE11でアプリが失敗する場合は、ライブラリを1つずつ削除して、IE11で確認してください。すべてのビルド警告エラーで完全に見落とされていました。これが当てはまる場合は、このライブラリを遅延読み込みモジュールとして使用するサイトの領域を区画化することを検討してください。

— アンドリュージュニアハワード
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.