IE 11浏览器出错 - EXCEPTION：对象不支持属性或方法'匹配'，其他浏览器工作正常 [英] Error in IE 11 browser - EXCEPTION: Object doesn't support property or method 'matches' , other browser it works fine

问题描述

在我的情况下，网页在firefox和chrome浏览器中工作正常但在IE v.11中它显示错误为

polyfills.ts -

  *浏览器POLYFILLS 
 * / 
 
 / ** IE9，IE10和IE11需要以下所有polyfill。 ** / 
导入'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 / set'; 
 
 / ** IE10和IE11要求以下内容对SVG元素的NgClass支持* / 
 import'classlist.js'; //运行`npm install --save classlist.js`。 
 
 / ** IE10和IE11需要以下内容来支持`@ angular / animation`。 * / 
 import'web-animations-js'; //运行`npm install --save web-animations-js`。 
 
 
 / **常青浏览器需要这些。 ** / 
 import'core-js / es6 / reflect'; 
 import'core-js / es7 / reflect'; 
 
 
 / **所有Firefox浏览器都需要以下内容来支持`@ angular / animation`。 ** / 
 // import'web-animations-js'; //运行`npm install --save web-animations-js`。 
 
 
 
 / ********************************* ************************************************** **************** 
 *区域JS是Angular本身所必需的。 
 * / 
 import'zone.js / dist / zone'; //包含在Angular CLI中。 
 
 
 
 / ********************************* ************************************************** **************** 
 *申请进口
 * / 
 
 / ** 
 *日期，货币，小数和管道百分比。 
 *需要：除Chrome，Firefox，Edge，IE11和Safari之外的所有内容10 
 * / 
 // import'intl'; //运行`npm install --save intl`。 
  

tsconfig.spec.json -

 compilerOptions：{
sourceMap：true，
声明：false，
moduleResolution：node，
 emitDecoratorMetadata：true，
experimentalDecorators：true，
lib：[
es2016
]，
outDir：../ out-tsc / spec，
module：commonjs，
target：es6，
baseUrl：，
types： [
jasmine，
节点
] 
}，
文件：[
test.ts
] ，
包含：[
** / *。spec.ts
] 
} 
  

tsconfig.json

  {
compileOnSave：false ，
compilerOptions：{
outDir：。/ dist / out-tsc，
sourceMap：true，
声明：false，
moduleResolution：node，
emitDecoratorMetadata：true，
target：es5，
experimentalDecor ators：true，
lib：[
es2015
] 
} 
} 
  

解决方案

在我将项目从Angular 5更新到6后，我遇到了同样的问题。我在Derek Brown的帮助下找到了解决方案评论。解决方案是在 polyfill.ts 文件中添加以下内容：

  if（！Element.prototype.matches）{
 Element.prototype.matches = Element.prototype.msMatchesSelector; 
} 
  

In my case, the webpage works fine in firefox and chrome browser but in IE v.11 it shows error as error comes in IE 11 DEVELOPER TOOLS. The error shows up in developer tools of the IE 11. The error does not allow to open a perticular link , on clicking it shows the following error.

polyfills.ts -

* BROWSER POLYFILLS
 */

/** 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/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 to support `@angular/animation`. */
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.

tsconfig.spec.json -

"compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es6",
    "baseUrl": "",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "target": "es5",
    "experimentalDecorators": true,
    "lib": [
      "es2015"
    ]
  }
}

解决方案

I was facing same issue after I updated my project from Angular 5 to 6. I found a solution with help of Derek Brown's comment. The solution is to add the following in the polyfill.ts file:

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

这篇关于IE 11浏览器出错 - EXCEPTION：对象不支持属性或方法'匹配'，其他浏览器工作正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！