Mixing
ng5 update to ng7 ie11 animation error, object unsupport “matches”property or method
0
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:
animation internet-explorer-11 angular7 zone
edited Jan 2 at 9:02
dferenc
4,781122332
asked Jan 2 at 8:29
qinglongqinglong
31
add a comment |
0
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:
animation internet-explorer-11 angular7 zone
edited Jan 2 at 9:02
dferenc
4,781122332
asked Jan 2 at 8:29
qinglongqinglong
31
add a comment |
0
0
0
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:
animation internet-explorer-11 angular7 zone
edited Jan 2 at 9:02
dferenc
4,781122332
asked Jan 2 at 8:29
qinglongqinglong
31
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:
animation internet-explorer-11 angular7 zone
animation internet-explorer-11 angular7 zone
edited Jan 2 at 9:02
dferenc
4,781122332
asked Jan 2 at 8:29
qinglongqinglong
31
edited Jan 2 at 9:02
dferenc
4,781122332
asked Jan 2 at 8:29
qinglongqinglong
31
edited Jan 2 at 9:02
dferenc
4,781122332
edited Jan 2 at 9:02
dferenc
4,781122332
edited Jan 2 at 9:02
dferenc
4,781122332
4,781122332
asked Jan 2 at 8:29
qinglongqinglong
31
asked Jan 2 at 8:29
qinglongqinglong
31
asked Jan 2 at 8:29
qinglongqinglong
31
31
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
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
answered Jan 3 at 6:31
Zhi Lv - MSFTZhi Lv - MSFT
71035
Thank you very much. I solved this issue in the last way. But I don't know why this only happens on IE11.
– qinglong
Jan 3 at 7:14
The issue is related to the browser compatibility, from this article, we could see that the Internet Explorer does not support ES6. If we want to use ES6 in IE browser, we need to add additional polyfills to support it. More details about angular polyfills, you could also check Angular Browser support.
– Zhi Lv - MSFT
Jan 3 at 9:09
But there is no such mistake in ng5. ng6 and ng7 appear. Can they be understood as the defect of ng?
– qinglong
Jan 4 at 1:29
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003276%2fng5-update-to-ng7-ie11-animation-error-object-unsupport-matchesproperty-or-me%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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
answered Jan 3 at 6:31
Zhi Lv - MSFTZhi Lv - MSFT
71035
Thank you very much. I solved this issue in the last way. But I don't know why this only happens on IE11.
– qinglong
Jan 3 at 7:14
The issue is related to the browser compatibility, from this article, we could see that the Internet Explorer does not support ES6. If we want to use ES6 in IE browser, we need to add additional polyfills to support it. More details about angular polyfills, you could also check Angular Browser support.
– Zhi Lv - MSFT
Jan 3 at 9:09
But there is no such mistake in ng5. ng6 and ng7 appear. Can they be understood as the defect of ng?
– qinglong
Jan 4 at 1:29
add a comment |
0
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
answered Jan 3 at 6:31
Zhi Lv - MSFTZhi Lv - MSFT
71035
Thank you very much. I solved this issue in the last way. But I don't know why this only happens on IE11.
– qinglong
Jan 3 at 7:14
The issue is related to the browser compatibility, from this article, we could see that the Internet Explorer does not support ES6. If we want to use ES6 in IE browser, we need to add additional polyfills to support it. More details about angular polyfills, you could also check Angular Browser support.
– Zhi Lv - MSFT
Jan 3 at 9:09
But there is no such mistake in ng5. ng6 and ng7 appear. Can they be understood as the defect of ng?
– qinglong
Jan 4 at 1:29
add a comment |
0
0
0
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
answered Jan 3 at 6:31
Zhi Lv - MSFTZhi Lv - MSFT
71035
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
answered Jan 3 at 6:31
Zhi Lv - MSFTZhi Lv - MSFT
71035
answered Jan 3 at 6:31
Zhi Lv - MSFTZhi Lv - MSFT
71035
answered Jan 3 at 6:31
Zhi Lv - MSFTZhi Lv - MSFT
71035
answered Jan 3 at 6:31
Zhi Lv - MSFTZhi Lv - MSFT
71035
71035
Thank you very much. I solved this issue in the last way. But I don't know why this only happens on IE11.
– qinglong
Jan 3 at 7:14
The issue is related to the browser compatibility, from this article, we could see that the Internet Explorer does not support ES6. If we want to use ES6 in IE browser, we need to add additional polyfills to support it. More details about angular polyfills, you could also check Angular Browser support.
– Zhi Lv - MSFT
Jan 3 at 9:09
But there is no such mistake in ng5. ng6 and ng7 appear. Can they be understood as the defect of ng?
– qinglong
Jan 4 at 1:29
add a comment |
Thank you very much. I solved this issue in the last way. But I don't know why this only happens on IE11.
– qinglong
Jan 3 at 7:14
The issue is related to the browser compatibility, from this article, we could see that the Internet Explorer does not support ES6. If we want to use ES6 in IE browser, we need to add additional polyfills to support it. More details about angular polyfills, you could also check Angular Browser support.
– Zhi Lv - MSFT
Jan 3 at 9:09
But there is no such mistake in ng5. ng6 and ng7 appear. Can they be understood as the defect of ng?
– qinglong
Jan 4 at 1:29
Thank you very much. I solved this issue in the last way. But I don't know why this only happens on IE11.
– qinglong
Jan 3 at 7:14
Thank you very much. I solved this issue in the last way. But I don't know why this only happens on IE11.
– qinglong
Jan 3 at 7:14
The issue is related to the browser compatibility, from this article, we could see that the Internet Explorer does not support ES6. If we want to use ES6 in IE browser, we need to add additional polyfills to support it. More details about angular polyfills, you could also check Angular Browser support.
– Zhi Lv - MSFT
Jan 3 at 9:09
The issue is related to the browser compatibility, from this article, we could see that the Internet Explorer does not support ES6. If we want to use ES6 in IE browser, we need to add additional polyfills to support it. More details about angular polyfills, you could also check Angular Browser support.
– Zhi Lv - MSFT
Jan 3 at 9:09
But there is no such mistake in ng5. ng6 and ng7 appear. Can they be understood as the defect of ng?
– qinglong
Jan 4 at 1:29
But there is no such mistake in ng5. ng6 and ng7 appear. Can they be understood as the defect of ng?
– qinglong
Jan 4 at 1:29
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003276%2fng5-update-to-ng7-ie11-animation-error-object-unsupport-matchesproperty-or-me%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
