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

Question

When my project was upgraded from angular 5 to angular 7, I found a compatibility problem between ie11 and edge. When using animation, I would report the following error, but this error doesn't report in chrome.

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

I tried to upgrade zone and web-animation-js to the latest version, but none of them solved the problem.

Error screenshot:

Answer 1

Please check the polyfills.ts file, and make sure you have uncomment the following import:

/** 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`.

I try to create a Angular 5 application and upgrade to Angular 7, then using above polyfills.ts, it seems that everything works well, it not display the "ERROR TypeError: Object unsupport "matches" property or method " error.

And the package.json file as below, you could refer to it:

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

You could check the package version, then upgrade the version.

If still meet this error, you could refer to this thread and try to add the following in the polyfill.ts file:

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

Here are some resources about upgrading to Angular 7, you could refer to them: article 1 and article 2