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

Question

当我的项目从5号角升级到7号角时，我发现ie11和edge之间存在兼容性问题。使用动画时，我会报告以下错误，但是在Chrome中不会报告此错误。

  

错误TypeError：对象不支持“ matches”属性或方法   @ angular / animations / fesm5 / browser.js中的WebAnimationsDriver.prototype.matchesElement

我试图将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：对象不支持“ matches”属性或方法”错误。

还有如下的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;
}

这里有一些有关升级到Angular 7的资源，您可以参考它们： article 1和article 2