Làm cách nào để hỗ trợ Internet Explorer trong ứng dụng Angular 8?

Khi tôi tạo một dự án với Angular CLI (8.0.0), tôi chạy ng serve, mở ứng dụng trong Internet Explorer và tôi thấy một màn hình trống.

Tôi đã xem các polyfills.tstệp và bỏ ghi chú những dòng sau:

    import 'classlist.js';
    import 'web-animations-js';

Tôi cũng đã loại bỏ tất cả các lần nhập core.js vì Angular 8 hỗ trợ trực tiếp core.js 3.0.

Tôi cũng đã chạy npm i.

package.json:

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "classlist.js": "^1.1.20150312",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

BIÊN TẬP:

danh sách trình duyệt:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

CHỈNH SỬA 2:

Bảng điều khiển trong Internet Explorer (11) hiển thị các lỗi sau:

polyfills.js: Syntax error (3168, 5) (dòng 3168 bắt đầu) ->class Zone {

nhà cung cấp.js: Syntax error (156, 1) (đầu dòng 156) ->class PlatformLocation {

main.ts: Syntax error (95, 20) (trỏ tới AppComponent)

Tôi cần làm gì nữa?

Theo vấn đề này trả lời

Bạn cần làm theo các bước sau

1. Tạo một tsconfig mới tsconfig.es5.json bên cạnh tsconfig.json với nội dung bên dưới

{
 "extends": "./tsconfig.json",
 "compilerOptions": {
     "target": "es5" 
  }
}

2. Trong angular.json Dưới projects:yourAppName:architect:build:configurations, thêm

"es5": {
      "tsConfig": "./tsconfig.es5.json"
    }

và projects:yourAppName:architect:serve:configurationsthêm

    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }

Hãy nhớ thay đổi yourAppName trong ứng dụng: build: es5 thành yourAppName !

đường dẫn đầy đủ hiển thị bên dưới

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig.es5.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }
  }
},

3. Chạy giao bóng với cấu hình này bằng lệnh dưới đây.

ng serve --configuration es5

Truy cập "tsconfig.json" và sử dụng target: "es5" thay vì "target": "es2015",

đích bên trong compileOnSave \ compilerOptions

------ Cách đơn giản và dễ dàng

Bạn cần thay đổi 2 file, polyfills.tsvà tsconfig.jsontương ứng.

Chỉ cần thêm Trình duyệt Polyfills vàopolyfills.ts

/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/promise';
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';

và tsconfig.json thay đổi "target" thành es5 như thế này

 "target": "es5", 

thay vì

"target": "es2015",

Lưu ý: câu trả lời ban đầu của tôi là từ Reddit ( https://www.reddit.com/r/Angular2/comments/buup6a/ )

Kiểm tra tsconfig.json của bạn Trong khi nâng cấp lên Angular 8, đối với tôi mục tiêu đã thay đổi thành es2015, vì vậy với ng phục vụ tôi gặp rất nhiều vấn đề. Trong khi biên dịch, thư mục dist có cả phiên bản es5 và es2015.

Về cơ bản, biên dịch cho sản xuất sẽ tạo ra cả hai phiên bản cho các trình duyệt mới và cũ hơn như IE11

Để kiểm tra IE11 trên môi trường phát triển, tôi đã tạo một môi trường dev trong angle.json, nơi tôi chỉ định một bản sao của tsconfig mà tôi gọi là tsconfig.dev.json trong đó mục tiêu được đặt thành es5. Chạy ng s -c = dev và voilá!

Để hỗ trợ đầy đủ cho IE, chúng tôi phải lấy một bộ polyfills đặc biệt từ thư viện mdn-polyfills .

Để cài đặt chúng, hãy sử dụng

npm i -s mdn-polyfills

tiếp theo hãy thêm chúng vào tệp polyfills.ts như thế này

import 'mdn-polyfills/Object.assign';
import 'mdn-polyfills/Object.create';
import 'mdn-polyfills/Object.entries';
import 'mdn-polyfills/Array.from';
import 'mdn-polyfills/Array.of';
import 'mdn-polyfills/Array.prototype.find';
import 'mdn-polyfills/Array.prototype.forEach';
import 'mdn-polyfills/Array.prototype.filter';
import 'mdn-polyfills/Array.prototype.findIndex';
import 'mdn-polyfills/Array.prototype.includes';
import 'mdn-polyfills/String.prototype.includes';
import 'mdn-polyfills/String.prototype.repeat';
import 'mdn-polyfills/String.prototype.startsWith';
import 'mdn-polyfills/String.prototype.endsWith';
import 'mdn-polyfills/String.prototype.padStart';
import 'mdn-polyfills/String.prototype.padEnd';
import 'mdn-polyfills/Function.prototype.bind';
import 'mdn-polyfills/NodeList.prototype.forEach';
import 'mdn-polyfills/Element.prototype.closest';
import 'mdn-polyfills/Element.prototype.matches';
import 'mdn-polyfills/MouseEvent';
import 'mdn-polyfills/CustomEvent';

sau đó, bạn sẽ ngừng gặp nhiều sự cố trong IE.

Đặt targetthành "es5", thiết lập của bạn browserslist, vậy là đủ.

Đọc thêm về chủ đề tại đây: https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/

Bạn chỉ cần ba lần thay đổi trong góc 8. thay đổi polyfills.ts và tsconfig.json. Thêm tệp mới có tên tsconfig-es5.json với nội dung bên dưới ..

{
 "extends": "./tsconfig.json",
 "compilerOptions": {
 "target": "es5" 
 }
 }

thay đổi mục tiêu trong tsconfig.json thành "target": "es5",

thực hiện lệnh sau "ng phục vụ"

Tôi đã gặp sự cố tương tự và đã giải quyết bằng hai bản sửa lỗi dưới đây. Bạn có thể đã bắt gặp nhiều bài đăng đề cập đến polyfill nhưng đó không phải là lý do duy nhất khiến IE không hoạt động như mong đợi.

Giải pháp

Thêm thuộc tính "es5BrowserSupport": true trong tệp angle.json. Đường dẫn được hiển thị trong hình ảnh.

Bây giờ, hãy thay đổi thuộc tính đích của bạn thành " es5 " trong tệp tsconfig.json

Giải thích đầy đủ có thể được tìm thấy ở đây

Bằng cách áp dụng hai bản sửa lỗi này, IE sẽ bắt đầu hoạt động ở chế độ cục bộ (gỡ lỗi) và sản xuất.

Tôi chỉ muốn thêm một cái gì đó hữu ích cho tôi:

1. Đọc bài viết này từ Tài liệu Angular Chính thức: https://angular.io/guide/browser-support
2. Một bài viết khác để giúp bạn trong quá trình của bạn: https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2
3. Đối với tôi, bài viết hay nhất đã giúp tôi hiểu mọi thứ, kể cả hai bài trước: https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1

Tóm lại, nếu bạn không muốn đọc nữa, tôi đã thực hiện các bước sau:

• Bỏ nhận xét một số nhập trong tệp polyfill.ts.

  nhập 'classlist.js';

  nhập 'web-animations-js';

• Cài đặt một vài gói npm.

npm install --save classlist.js npm install --save web-animations-js

• Sửa đổi tệp danh sách trình duyệt. Ở cuối tệp, hãy tìm dòng này:

  không phải IE 9-11 # Để hỗ trợ IE 9-11, hãy xóa 'not'.

Vui lòng loại bỏ từ 'không phải' .

Thêm vào đó, chỉ cần thêm Trình duyệt Polyfills trong polyfills.ts

/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es/symbol';
// import 'core-js/es/promise';
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';
import 'core-js/es/weak-map';
import 'core-js/es/set';

và tsconfig.jsonthay đổi "target" thành es5 như thế này

"target": "es5",

thay vì

"target": "es2015",

Chạy:

ng phục vụ - mở ra

Tôi hy vọng nó có thể giúp bạn :)

Điều này thực sự làm phiền tôi vì vậy tôi đã viết một tập lệnh nodeJs sẽ kích hoạt "giải pháp thay thế" được xác định ở đây: ng github

Là một nhà phát triển doanh nghiệp tạo ra hàng tấn ứng dụng góc cạnh, không thể phát triển cục bộ chỉ chống lại chrome và firefox. Bất cứ ai đã hoàn thành nhà phát triển web trong hơn một phút đều biết rằng chỉ vì nó trông tuyệt vời trong chrome không có nghĩa là IE sẽ hài lòng. OK, chỉ cần cài đặt tập lệnh và phân phát nó trong IE mọi lúc, mọi nơi và kiểm tra ứng dụng của bạn trong IE cục bộ trước khi chuyển sang dev.

Đây là một tính năng mới của Angular rất thú vị được gọi là tải vi sai

<script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script>
<script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></script>
<script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script>
<script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script>
<script src=“main-es2015.63808232910db02f6170.js” type=“module”></script>
<script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>

Nếu bạn thấy index.html ở trên từ thư mục xây dựng, thì mỗi js có hai phiên bản:

• Một là es2015 với type="module"thuộc tính cho các trình duyệt hiện đại
• Một phiên bản khác là phiên bản es5 với nomodulethuộc tính dành cho các trình duyệt có độ trễ.

Do đó, Angular cli sẽ tạo ra nó một cách duyên dáng trên sản phẩm. Nhưng nếu bạn muốn chạy ng servetừ cục bộ, thì bạn phải đảm bảo ng serveđang chạy theo cách thủ công từ tệp tsconfig cótarget: es5

Bước 1: Bỏ nhận xét plyfills trong polyfills.ts. Đồng thời chạy tất cả các lệnh cài đặt npm được đề cập trong tệp polyfills.ts để cài đặt các gói đó

Bước 2: Trong danh sách trình duyệt, loại bỏ tệp không có hỗ trợ IE 9-11 được đề cập

Bước 3: Trong tệp tsconfig.json thay đổi như "target": "es2015" thành "target": "es5"

Các bước này đã khắc phục sự cố của tôi

Điều gì về cập nhật bao gồm browserslistvà loại bỏ nottrước `IE 9-11 ...? như thế này?

Tệp này được hệ thống xây dựng sử dụng để điều chỉnh đầu ra CSS và JS để hỗ trợ các trình duyệt được chỉ định bên dưới. Để biết thêm thông tin về các tùy chọn định dạng và quy tắc, vui lòng xem: https://github.com/b Browselist/b browserlist#queries

Bạn có thể xem những trình duyệt nào đã được các truy vấn của bạn chọn bằng cách chạy:

npx browserslist

0,5% 2 phiên bản cuối cùng Firefox ESR không chết IE 9-11 # Để hỗ trợ IE 9-11, hãy xóa 'not'.