ng5 обновление до ng7 ie11 ошибка анимации, объект не поддерживается "соответствует" свойству или методу

Question

Когда мой проект был обновлен с углового 5 до углового 7, я обнаружил проблему совместимости между ie11 и edge. При использовании анимации я бы сообщал о следующей ошибке, но эта ошибка не отображается в chrome.

ОШИБКА TypeError: Объект не поддерживает "соответствует" свойству или методу WebAnimationsDriver.prototype.matchesElement в @ angular / animations / fesm5 / browser.js

Я пытался обновить zone и web-animation-js до последней версии, но ни одна из них не решила проблему.

Снимок экрана с ошибкой:

Answer 1

Пожалуйста, проверьте файл 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';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
 import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.



/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * 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`.

Я пытаюсь создать приложение Angular 5 и обновить его до Angular 7, а затем с помощью вышеуказанного polyfills.ts, кажется, что все работает хорошо, он не отображает «ERROR TypeError: Object unsupport» соответствует «свойство или метод» ошибка.

И файл package.json, как показано ниже, вы можете обратиться к нему:

{
  "name": "angular-io-example",
  "version": "1.0.0",
  "private": true,
  "description": "Example project from an angular.io guide.",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "start": "ng serve",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/platform-server": "^7.1.4",
    "@angular/router": "^7.1.4",
    "@angular/upgrade": "7.1.4",
    "angular-in-memory-web-api": "~0.5.0",
    "core-js": "^2.6.1",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "^7.1.4",
    "@angular/compiler-cli": "^7.1.4",
    "@angular/language-service": "^7.1.4",
    "@types/jasmine": "^3.3.5",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^10.12.18",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "lodash": "^4.16.2",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "^5.4.2",
    "rxjs-tslint": "^0.1.6",
    "ts-node": "^3.3.0",
    "tslint": "^5.12.0",
    "typescript": "^3.1.1",
    "webpack": "^4.28.3"
  },
  "repository": {}
}

Вы можете проверить версию пакета, а затем обновить версию.

Если эта ошибка все еще встречается, вы можете обратиться к этой теме и попытаться добавить следующее вфайл polyfill.ts:

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector;
}

Вот некоторые ресурсы по обновлению до Angular 7, к которым вы можете обратиться: article 1 и article 2