☰

Angular 2 / 4 / 5 が IE11 で動作しない 質問する

tag-icon • tag-icon angular typescript internet-explorer
Angular 2 / 4 / 5 が IE11 で動作しない 質問する

IE 11 で実行しているときに、Angular 2 アプリが「読み込み中...」と表示されたままになる理由を解明しようとしています。

誰かの提案に従って、Stack Overflow に投稿されたこの plunker を 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 アプリを実行できない理由について、何かご存知の方はいらっしゃいますか?

ありがとう！

ベストアンサー1

最新バージョンの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することができますtsconfig.json。@MikeDub提案されています。これは、es6定義のコンパイル出力を定義に変更しますes5。たとえば、ファットアロー関数（()=>{}）は匿名関数（ ）にコンパイルされますfunction(){}。es6でサポートされているブラウザのリストは、ここ。

ノート

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

• IE10 以前でエラーが発生する場合は、具体的ににpackage.jsonダウングレードしてください。これより上のバージョンでは、「古い」IE バージョンはサポートされなくなりました。webpack-dev-server2.7.1

おすすめ記事