web-dev-qa-db-ja.com

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

IE 11で実行しているときにAngular 2アプリがLoading ...を表示しないのはなぜなのか把握しようとしています。

誰かの提案に従って、私はChromeとIE 11.の両方で、スタックオーバーフローについて誰かが投稿したこのプランカーを試してみました。しかし、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アプリを実行できない理由について、誰もが考えましたか。

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

angulartypescriptinternet-explorer
107
Pat Bone Crusher Laplante

私は全く同じ問題を抱えていたし、解決策のどれも私のために働いていなかった。代わりに、（homepage）.htmlの<head>の下に次の行を追加して修正しました。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
20
Alex W.

私は今日この問題に遭遇した。私はGitHub上でベータ版のそれ以降のバージョンに行くことを必要としない解決策を見つけました。

あなたのhtmlに次のスクリプトを追加してください：

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

これで問題は解決しました。詳細については、ここgithubの問題に従うことができます。 https://github.com/angular/angular/issues/7144

19
Ashley Grenon

適切なセクションのコメントを外して、ターゲットブラウザに合わせて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';
10
Jigar Bhatt

2017年2月現在

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

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

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

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

これはsrc/tsconfig.jsonの下にあります。

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
9
MikeDub

Iexplorer 11とAngular 2を使用している私にとっては、2つのことを行うことで上記の問題をすべて解決しました。

index.html addに：

<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';
9
Belen Martin

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

これは質問に対する完全な回答ではありません（技術的な回答については @ Zzeの回答 を参照してください）が、needs追加：

互換性モード

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

enter image description here

8
Shotgun Ninja
  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インストールコマンドがあります。 Angular CLIの初期バージョンを使用している場合は、3番目のものもあります。 Angular CLIバージョン7、6、および1.7の場合は、実行する必要があります。

npm install --save classlist.js

npm install - web-animations-jsを保存する

これでIEを開き、アプリケーションをレンダリングしてチェックします:)

7
Ali

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

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

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

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

説明の言葉として、polyfillはそれをサポートしていないWebブラウザ上の機能を実装するコードの一部です。これが、デフォルトのpolyfills.ts設定では最小限のインポートのみがアクティブになる理由です（これはいわゆる「常緑樹」ブラウザを目的としているため、自動的に更新される最後のバージョンのブラウザ）。

6
Ekeko

私はAngular 4アプリケーションを持っていますが、IE 11ブラウザでは動作していませんでしたが、以下で変更を行いましたが、正しく動作しています。下記のコードを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つのステップはあなたの問題を解決するでしょう、何かがあるかどうか私に知らせてください。ありがとうございます。

3
S Tiwari

私は同じ問題を抱えていました、互換表示でイントラネットサイトを表示するを有効にしてもpolyfills.tsが機能しない場合でも、言われているように以下の行を追加する必要があります。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
3
Ivan Lopez

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`.
2
Kuldip D Gandhi

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

<script src="https://npmcdn.com/[email protected] 
 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
gaurav gupta

tsconfig.jsonを変更する

"target":"es5",

私の問題を解決した

1
user3050538

他の解決策がどれもうまくいかない場合は、問題の原因を調査する価値があります。 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にダウングレードした後、問題は解決しました。

1
typhon04

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

import 'core-js/es7/object';

そしてこの行は、欠けている「includes」メソッドを修正します。

import 'core-js/es7/array'
0
Christian

私はこのスレッドですべての解決策を試しただけでなく、他の解決策を試しても成功しませんでした。私にとってこれを修正したのは、メジャーバージョンの変更も含めて、プロジェクト内のすべてのパッケージを更新することでした。そう：

  1. 古いnpmを実行
  2. 結果から現在の列に表示されている番号でpackage.jsonを更新します（これはプロジェクトを中断させる可能性があります、注意してください）。
  3. Npm installを実行する
  4. 他の答えで述べたように、私もpolyfillsのコメントを外してください。

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

0
Jordan