堆棧內存溢出
  簡體   English   中英

Angular 2 / 4 / 5 在 IE11 中不起作用

[英]Angular 2 / 4 / 5 not working in IE11

 原文  2016-02-01 21:30:51  0   22    angular/ typescript/ internet-explorer

問題描述

我想弄清楚為什么我的 angular 2 應用程序在 IE 11 中運行時卡在顯示 Loading... 上。

根據某人的建議，我嘗試了這個由堆棧溢出的人在 chrome 和 IE 11 上發布的 plunker。在 Chrome 上工作正常，但在 IE 11 上失敗。同樣的錯誤，堅持說“正在加載...”

plunker 是： 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 應用程序？

謝謝！

22 個解決方案

解決方案1
 190  2017-02-23 21:26:55

默認情況下，最新版本的angular僅為常綠瀏覽器設置...

當前設置適用於所謂的“常青”瀏覽器； 自動更新自己的最新版本的瀏覽器。 這包括 Safari >= 10、Chrome >= 55（包括 Opera）、桌面上的 Edge >= 13，以及移動設備上的 iOS 10 和 Chrome。
這也包括 firefox，雖然沒有提到。

有關瀏覽器支持的更多信息以及針對特定瀏覽器的建議 polyfill 列表，請參見此處。 https://angular.io/guide/browser-support#polyfill-libs

這意味着您必須手動啟用正確的 polyfills 才能讓 Angular 在 IE11 及更低版本中工作。

為此，請進入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 @jackOfAll即使用戶使用的是不需要它們的常綠瀏覽器。 答案是，是的！ ~162KB 8 月 8 日，包含 IE11 polyfill 將使您的~162KB文件從~162KB到~258KB 。 我已經投資試圖解決這個問題，但目前似乎不可能。

• 如果您在 IE10 及以下版本中遇到錯誤，請進入package.json並將webpack-dev-server降級到2.7.1 。 高於此的版本不再支持“較舊”的 IE 版本。

解決方案2
 23  2017-12-12 16:51:12

我遇到了完全相同的問題，但沒有一個解決方案對我有用。 而是在<head>下的 (homepage).html 中添加以下行來修復它。

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

解決方案3
 19  2016-02-18 15:48:51

我今天遇到了這個問題。 我在 GitHub 上找到了一個解決方案，不需要轉到更高版本的測試版。

將以下腳本添加到您的 html：

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

這為我解決了問題。 有關更多詳細信息，您可以在此處關注 github 問題： https : //github.com/angular/angular/issues/7144

解決方案4
 12  2017-02-24 01:45:52

截至 2017 年 2 月

使用Angular-Cli項目， polyfills.ts文件中的所有行都已取消注釋，因此所有 polyfill 都已被使用。

我在這里找到了這個解決方案來解決我的問題。

總結一下上面的鏈接， IE 不支持es6 的一個特性lambda 箭頭 / 胖箭頭函數。 （這是如果 polyfills.ts 不適合你）。

解決方案：您需要針對es5才能在任何 IE 版本中運行，僅在 Microsoft 的新 Edge 瀏覽器中引入了對此的支持。

這是在src/tsconfig.json下找到的：

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

解決方案5
 11  2018-01-19 11:53:57

您需要通過取消注釋適當的部分來為您的目標瀏覽器調整 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';

解決方案6
 10  2018-05-18 10:22:31

對於 iexplorer 11 和 Angular 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';

解決方案7
 10  2019-01-28 10:49:50

  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，可能還有第三個版本。 對於 Angular CLI 版本 7、6 和 1.7，您需要運行：

npm install --save classlist.js

npm install --save web-animations-js

現在打開 IE 並呈現您的應用程序並檢查:)

解決方案8
 9  2017-10-06 17:09:08

編輯 2018/05/15 ：這可以通過元標記來實現； 請將該標簽添加到您的 index.html 並忽略這篇文章。

這不是問題的完整答案（有關技術答案，請參閱上面@Zze 的答案），但需要添加一個重要步驟：

兼容模式

即使有適當的 polyfills，在 IE11 上使用 polyfills 運行 Angular 2+ 應用程序仍然存在問題。 如果您在 Intranet 主機上運行站點（即，如果您在http://localhost或其他映射的本地域名上測試它），您必須進入兼容性視圖設置並取消選中“在兼容性視圖中顯示 Intranet 站點”，因為 IE11 的兼容性視圖打破了 Angular 的 ES5 polyfills 中包含的一些約定。

在此處輸入圖片說明

解決方案9
 8  2017-09-20 12:19:35

截至 2017 年 9 月（節點版本=v6.11.3，npm 版本=3.10.10），這對我有用（感謝@Zze）：

編輯polyfills.ts並取消注釋 IE11 所需的導入。

更准確地說，編輯polyfills.ts （默認位於src文件夾中）並取消注釋 IE11 所需的所有行（文件中的注釋准確解釋了在 IE11 上運行所需的導入）。

一個小警告：取消注釋classlist.js和web-animations-js classlist.js要注意。 這些注釋行都有一個特定的注釋：您必須在取消注釋之前運行相關的 npm 命令，否則 polyfills.ts 的處理將中斷。

作為解釋的話，polyfills 是在不支持它的 Web 瀏覽器上實現功能的代碼片段。 這就是為什么在默認的 polyfills.ts 配置中只有最小的導入集是活動的（因為它的目標是所謂的“常青”瀏覽器；自動更新自己的瀏覽器的最新版本）。

解決方案10
 6  2019-01-20 14:50:58

我有一個 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 個步驟將解決您的問題，如果有任何問題，請告訴我。 謝謝！！！

解決方案11
 5  2018-10-11 12:20:51

如果您仍然遇到並非所有 JavaScript 函數都能正常工作的問題，請在您的 polyfills 中添加這一行。 它修復了缺失的“值”方法：

import 'core-js/es7/object';

這一行修復了缺失的“包含”方法：

import 'core-js/es7/array'

解決方案12
 4  2018-06-18 19:26:41

我遇到了同樣的問題，如果您在兼容性視圖中啟用了顯示 Intranet 站點，則 polyfills.ts 將不起作用，您仍然需要按照說明添加以下行。

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

解決方案13
 3  2018-09-07 19:41:35

改變tsconfig.json

"target":"es5",

解決了我的問題

解決方案14
 2  2018-05-22 11:01:06

對我有用的是我按照以下步驟來提高我在 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';

解決方案15
 2  2018-06-06 19:45:51

在 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`.

解決方案16
 2  2018-11-12 08:39:43

如果其他解決方案都不適合您，則值得調查問題的根源。 可能是 npm 模塊直接插入 ES6 代碼，無法轉譯。

在我的情況下，我有

SCRIPT1002：以下行中的語法錯誤 vendor.js (114536,27) ：

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

我搜索了node_modules文件夾並找到了該行來自哪個文件。 結果發現罪魁禍首是punycode.js ，它在 2.1.0 版本中直接使用了 ES6。

我降級到1.4.1后，使用ES5，問題解決。

解決方案17
 2  2019-11-01 16:48:22

如何在 Angular8 中解決這個問題

import 'classlist.js';取消注釋import 'classlist.js'; 並import 'web-animations-js'; 然后使用npm install --save classlist.js和npm install --save web-animations-js安裝兩個依賴項。

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

然后ng serve運行應用程序並在 IE 中打開，它將起作用

解決方案18
 1  2019-12-31 08:36:44

  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" />

解決方案19
 1  2020-09-14 09:45:43

第 1 步：取消注釋 polyfills.ts 中的 plyfills。 同時運行 polyfills.ts 文件中提到的所有 npm install 命令來安裝這些包

第 2 步：在 browserslist 文件中刪除提到 IE 9-11 支持的行之前

第 3 步：在 tsconfig.json 文件中將“target”：“es2015”更改為“target”：“es5”

這些步驟解決了我的問題

解決方案20
 0  2019-02-01 16:10:11

我嘗試了這個線程中的所有解決方案以及其他解決方案中的一堆，但沒有成功。 最終為我解決這個問題的是更新我項目中的每個包，包括主要版本更改。 所以：

  1. 運行 npm 過時
  2. 使用結果中當前列中顯示的數字更新 package.json（這可能會破壞您的項目，請小心）
  3. 運行 npm 安裝
  4. 確保我也沒有注釋其他答案中提到的 polyfill。

就是這樣。 我希望我能查明哪個圖書館是罪魁禍首。 我得到的實際錯誤是 Angular 6 中 vendor.js 中的“語法錯誤”。

解決方案21
 0  2020-05-18 13:39:50

開箱即用的 Angular 9 現在應該可以在 IE11 中正常工作。

我嘗試了這里列出的所有建議，但沒有一個奏效。 但是我確實設法將其跟蹤到我在app.module中導入的特定庫（ ZXingScannerModule是ZXingScannerModule ）。 如果您的應用程序在第一頁上的 IE11 中失敗，請嘗試一次刪除一個庫並檢查 IE11 - 在我的所有構建警告錯誤中完全錯過了它。 如果您確實發現是這種情況，請考慮將您的站點區域划分為使用該庫作為延遲加載模塊的區域。

解決方案22
 0  2020-09-11 17:16:37

最新版本的 core-js lib 提供了不同路徑的 polyfill。 所以在 polyfills.js 中使用以下內容。 並將target更改為es5中的tsconfig.base.json

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Angular 4在IE11中不起作用 Angular 4應用程序無法在IE11和Edge上運行 Angular 4 Observable在IE11中不起作用 IE11上的Angular 4動畫無法正常工作 Angular Firestore 身份驗證在 IE11 上不起作用 Angular2在IE11上不起作用 即使使用 polyfill，Angular 8 也無法在 IE11 中工作 Bootstrap/Angular 下拉菜單在 IE11 中不起作用 Angular - 材料組件在 IE11 中不起作用 Angular應用程序在IE11中不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM