Как мне поддержать Internet Explorer в приложении Angular 8? - программирование
Подтвердить что ты не робот

Как мне поддержать Internet Explorer в приложении Angular 8?

Когда я создаю проект с помощью Angular CLI (8.0.0), я запускаю ng serve, открываю приложение в Internet Explorer, и у меня появляется пустой экран.

Я взглянул на файлы polyfills.ts и раскомментировал следующие строки:

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

Я также удалил весь импорт core.js, так как Angular 8 напрямую поддерживает core.js 3.0.

Я также побежал 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"
    ]
  }
}

РЕДАКТИРОВАТЬ:

browserlists:

# 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'.

РЕДАКТИРОВАТЬ 2:

Консоль в Internet Explorer (11) показывает следующие ошибки:

polyfills.js: Syntax error (3168, 5) (начало строки 3168) → class Zone {

vendor.js: Syntax error (156, 1) (начало строки 156) → class PlatformLocation {

main.ts: Syntax error (95, 20) (указывает на компонент приложения)

Что еще мне нужно сделать?

4b9b3361

ОТВЕТЫ

Ответ 1

По этому вопросу ответ

Вам необходимо выполнить следующие шаги

  1. Создайте новый tsconfig tsconfig.es5.json рядом с tsconfig.app.json со следующим содержанием
{
 "extends": "./tsconfig.app.json",
 "compilerOptions": {
     "target": "es5" 
  }
}
  1. В angular.json Под projects:yourAppName:architect:build:configurations, добавить
"es5": {
      "tsConfig": "./tsconfig.es5.json"
    }

и projects:yourAppName:architect:serve:configurations добавить

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

Не забудьте изменить ваше AppName в приложении: build: es5 на yourAppName!

полный путь показан ниже

"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"
    }
  }
},
  1. Запустите подачу с этой конфигурацией, используя приведенную ниже команду.
ng serve --configuration es5

Ответ 2

Примечание: мой оригинальный ответ был от Reddit (https://www.reddit.com/r/Angular2/comments/buup6a/)

Проверьте ваш tsconfig.json При обновлении до Angular 8 цель изменилась на es2015 для меня, поэтому с ng serve я столкнулся с множеством проблем. При компиляции папка dist имела версии как es5, так и es2015.

По сути, компиляция для производства создаст обе версии для новых и старых браузеров, таких как IE11

Чтобы протестировать IE11 в среде разработки, я создал среду разработки в angular.json, где я указал копию tsconfig, которую я назвал tsconfig.dev.json, где целью является es5. Запустите ng s -c = dev и вуаля!

Ответ 3

Для полной поддержки IE нам нужно было извлечь специальный набор polyfills из библиотеки mdn-polyfills.

Для их установки используйте

npm i -s mdn-polyfills

затем добавьте их в файл polyfills.ts следующим образом

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

после этого вы должны перестать испытывать многие проблемы в IE.

Ответ 4

Это действительно беспокоило меня, поэтому я написал скрипт nodeJs, который включит "обходной путь", определенный здесь: ng github

Будучи корпоративным разработчиком, который выпускает тонны угловых приложений, разработка локально не только для Chrome и Firefox. Любой, кто занимался разработкой веб-приложений более минуты, знает, что только потому, что в Chrome он выглядит здорово, это не значит, что IE будет счастлив. ОК, просто установите скрипт и время от времени обслуживайте его в IE, а затем локально проверяйте свое приложение в IE, прежде чем нажимать на dev.

Ответ 5

Есть новости о решении этой проблемы?

Я сталкиваюсь с той же проблемой, работая с решением ядра .net и Angular 8 (обновлен с 7), и он все еще не работает.

Ответ 7

Перейдите к "tsconfig.json" и используйте target: "es5" вместо "target": "es2015",

цель, которая находится внутри compileOnSave\compilerOptions

Ответ 8

ни одно из этих предложений не работает для Angular 8 в IE11, у меня есть простой веб-компонент hello world, и он не работает без ошибок в IE11. Там должно быть какое-то реальное решение там, верно?