ng5更新到ng7 ie11动画错误，对象不支持"matches"属性或方法

Question

当我的项目从angular5升级到angular7时，发现ie11和edge的兼容性问题。我在使用动画的时候会报如下错误，但是在chrome.

中没有报这个错误

ERROR TypeError: Object unsupport "matches" property or method WebAnimationsDriver.prototype.matchesElement in @angular/animations/fesm5/browser.js

我尝试将 zone 和 web-animation-js 升级到最新版本，但是 none 解决了问题。

错误截图：

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": {}
}

您可以查看软件包版本，然后升级版本。

如果仍然遇到这个错误，您可以参考this thread并尝试在polyfill.ts文件中添加以下内容：

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

这里有一些关于升级到Angular7的资源，你可以参考一下： article 1 and article 2

ng5更新到ng7 ie11动画错误，对象不支持"matches"属性或方法

ng5 update to ng7 ie11 animation error, object unsupport "matches"property or method

animation

zone

internet-explorer-11

angular7