web-dev-qa-db-ja.com

エラーIE 11ブラウザ-例外：オブジェクトはプロパティまたはメソッド 'matches'をサポートしていません。他のブラウザは正常に動作します

私の場合、Webページはfirefoxおよびchromeブラウザーでは正常に機能しますが、IE v.11では error is IE 11 DEVELOPER TOOLS としてエラーを表示します。エラーは、IE 11の開発者ツールに表示されます。エラーは、特定のリンクを開くことを許可しません。クリックすると、次のエラーが表示されます。

In all browser it runs fine but in IE 11 the following error pops up. any help.

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"
    ]
  }
}
javascriptangulartypescriptinternet-explorer
15
stec1

プロジェクトをAngular 5から6に更新した後、同じ問題に直面していました。DerekBrownのコメントの助けを借りて解決策を見つけました。解決策はpolyfill.tsファイル：

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

Angular 6 and 7（TypeScript）を使用している場合は、以下のSanjay Guptaの答えを修正する必要があります。

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

キャスト（まあ、実際には型付けを行わない）により、トランスパイラーは未定義のメソッドを解析できます。

11
Michael Coxon

IEは、非標準の名前（ source ）を使用してmatches関数を実装します。そのリンクには、matches関数。IEで使用できます。

7
Derek Brown