IE 11浏览器错误 - EXCEPTION：对象不支持属性或方法'matches'，其他浏览器正常工作。

Question

在我的情况下，网页在Firefox和Chrome浏览器中工作正常，但在IE v.11中显示错误，错误出现在IE 11开发者工具中。该错误会在IE 11的开发者工具中显示。该错误不允许打开特定链接，在点击后会显示以下错误。

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"
    ]
  }
}

- stec1

---

我认为窗口被红色下划线标记的事实与您正在经历的错误是独立的。 - Derek Brown

你能否发布一份你的TypeScript配置文件以及你使用的任何polyfills的副本？ - Derek Brown

@DerekBrown 确定会在问题描述中更新。 - stec1

@DerekBrown 我通过 https://dev59.com/LlgR5IYBdhLWcg3wbs2X 成功解决了红色下划线问题。所以现在我没有任何窗口加载问题。但在IE11中仍然存在该错误。 - stec1

@DerekBrown - 我找到了一些链接，但不知道如何在这个问题上使用它以及如何使用前缀ms matchselector https://github.com/WICG/inert/issues/51 - stec1

Answer 1

在我将项目从Angular 5更新到6后，面临相同的问题。通过Derek Brown的评论，我找到了一个解决方案。解决方案是在polyfill.ts文件中添加以下内容：

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

- Sanjay Gupta

Answer 2

对于使用Angular 6和7（typescript）的用户，您应该根据Sanjay Gupta以下的答案进行修改：

if (!Element.prototype.matches) {
  Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

此处的类型转换（或者说是取消类型）允许转译器解析未定义的方法。

- Michael Coxon

---

附加信息：这段代码片段（值得赞扬的是）似乎是基于https://developer.mozilla.org/en-US/docs/Web/API/Element/matches。 - ryanm

Answer 3

看起来IE使用了一个非标准名称来实现matches函数(来源)。此链接包含一个polyfill，它将定义matches函数以便在IE上使用。

- Derek Brown

---

所以在 polyfills.ts 文件中，我应该把 matches 函数添加到哪里？ - stec1

现有的 polyfill 导入下方就可以了。 - Derek Brown

请问您能告诉我语法是什么吗？因为这里显示错误为“找不到元素”。 - stec1

所以我已经在其他导入项下面包含了polyfill - 如果(!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; 但它出现了完整的红线下划线，并显示“元素上不存在属性匹配”。 - stec1

@stec1 如果你还在阅读，我已经包含了一个解决 TypeScript 问题的答案（考虑到你得到的错误信息，我想你正在使用 TypeScript）。 - Michael Coxon